Как изменить навигационный html с помощью jQuery?

Вот мой код HTML. Я хочу преобразовать теги html div в теги списка элементов для мобильного меню. Я создаю код jQuery, но он работает неправильно.Как изменить навигационный html с помощью jQuery?

.wrapper { 
 
    margin: 0px auto; 
 
    width: 960px; 
 
} 
 
.mainMenu { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.mainMenu li { 
 
    list-style: none; 
 
    position: relative; 
 
} 
 
.mainMenu > li { 
 
    float: left; 
 
} 
 
.mainMenu li a { 
 
    text-decoration: none; 
 
    color: #666; 
 
    padding: 15px 10px; 
 
    display: block; 
 
    font-size: 125%; 
 
} 
 
.mainMenu li.sm_megamenu_top_actived a, 
 
.mainMenu li:hover > a { 
 
    background: #b50016; 
 
    color: #fff; 
 
} 
 
.mainMenu li .sm_megamenu_dropdown_1column { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    width: 100%; 
 
    transform: scale(0); 
 
    opacity: 0; 
 
    background: #f2f2f2; 
 
    padding: 10px 1%; 
 
    box-shadow: 0 4px 4px #999; 
 
    transition: all 0.3s ease-in-out 0s; 
 
} 
 
.mainMenu li:hover .sm_megamenu_dropdown_1column { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
} 
 
.mainMenu li .sm_megamenu_dropdown_1column a { 
 
    font-size: 12px; 
 
    line-height: 30px; 
 
    padding: 0 15px; 
 
}

<ul class="mainMenu"> 
 
    <li> 
 
    <a class="sm_megamenu_head sm_megamenu_nodrop sm_megamenu_actived sm_megamenu_top_actived" href="#Link1" id="sm_megamenu_2"> <span class="sm_megamenu_icon sm_megamenu_nodesc"> <span class="sm_megamenu_title">Home</span> </span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a class="sm_megamenu_head sm_megamenu_drop " href="javascript:void(0)" id="sm_megamenu_3"> <span class="sm_megamenu_icon sm_megamenu_nodesc"> <span class="sm_megamenu_title">Categories</span> </span> 
 
    </a> 
 
    <div class="sm_megamenu_dropdown_1column Sm_Megamenu_Block_List"> 
 
     <div class="sm_megamenu_col_1 sm_megamenu_firstcolumn sm_megamenu_id3 "> 
 
     <div class="sm_megamenu_col_6 sm_megamenu_firstcolumn sm_megamenu_id66 "> 
 
      <div class="sm_megamenu_head_item "> 
 
      <div class="sm_megamenu_title"><a class="sm_megamenu_nodrop " href="#Link2.1"><span class="sm_megamenu_title_lv2">Category 1</span></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="sm_megamenu_col_6 sm_megamenu_firstcolumn sm_megamenu_id83"> 
 
      <div class="sm_megamenu_head_item "> 
 
      <div class="sm_megamenu_title"><a class="sm_megamenu_nodrop " href="#Link2.2"><span class="sm_megamenu_title_lv2">Category 2</span></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="sm_megamenu_col_6 sm_megamenu_firstcolumn sm_megamenu_id82 "> 
 
      <div class="sm_megamenu_head_item "> 
 
      <div class="sm_megamenu_title"><a class="sm_megamenu_nodrop " href="#Link2.3"><span class="sm_megamenu_title_lv2">Category 3</span></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="sm_megamenu_col_6 sm_megamenu_firstcolumn sm_megamenu_id67 "> 
 
      <div class="sm_megamenu_head_item "> 
 
      <div class="sm_megamenu_title"><a class="sm_megamenu_nodrop " href="#Link2.4"><span class="sm_megamenu_title_lv2">Category 4</span></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <a class="sm_megamenu_head sm_megamenu_drop " href="javascript:void(0)" id="#Link3"> <span class="sm_megamenu_icon sm_megamenu_nodesc"> <span class="sm_megamenu_title">Products</span> </span> 
 
    </a> 
 
    <div class="sm_megamenu_dropdown_1column Sm_Megamenu_Block_List"> 
 
     <div class="sm_megamenu_col_1 sm_megamenu_firstcolumn sm_megamenu_id135 "> 
 
     <div class="sm_megamenu_col_6 sm_megamenu_firstcolumn sm_megamenu_id136 "> 
 
      <div class="sm_megamenu_head_item "> 
 
      <div class="sm_megamenu_title"><a class="sm_megamenu_nodrop " href="#Link3.1"><span class="sm_megamenu_title_lv2">Product 1</span></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="sm_megamenu_col_6 sm_megamenu_firstcolumn sm_megamenu_id137 "> 
 
      <div class="sm_megamenu_head_item "> 
 
      <div class="sm_megamenu_title"><a class="sm_megamenu_nodrop " href="#Link3.2"><span class="sm_megamenu_title_lv2">Product 2</span></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="sm_megamenu_col_6 sm_megamenu_firstcolumn sm_megamenu_id147 "> 
 
      <div class="sm_megamenu_head_item "> 
 
      <div class="sm_megamenu_title"><a class="sm_megamenu_nodrop " href="#Link3.3"><span class="sm_megamenu_title_lv2">Product 3</span></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </li> 
 
</ul>

Я хочу выше HTML-код:

#yt_screennav { 
 
    background: #222; 
 
} 
 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#yt_screennav ul.mainMenu li a { 
 
    text-decoration: none; 
 
    color: #666; 
 
    padding: 9px 0 9px 10px; 
 
    line-height: 100%; 
 
    display: block; 
 
    border-bottom: 1px solid #444; 
 
} 
 
#yt_screennav ul.mainMenu li ul li a { 
 
    padding-left: 30px; 
 
}

<nav id="yt_screennav"> 
 
    <ul class="mainMenu"> 
 
    <li> 
 
     <a href="#Link1" id="sm_megamenu_2"> <span>Home</span> 
 
     </a> 
 
    </li> 
 
    <li class="level0 nav-1 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"> 
 
     <a href="javascript:void(0)"> <span>Categories</span> 
 
     </a> 
 
     <ul class="level0 nav-1 parent"> 
 
     <li class="level1 nav-1-1 first"><a href="#Link2.1">Category 1</a> 
 
     </li> 
 
     <li class="level1 nav-1-2"><a href="#Link2.2">Category 2</a> 
 
     </li> 
 
     <li class="level1 nav-1-3"><a href="#Link2.3">Category 3</a> 
 
     </li> 
 
     <li class="level1 nav-1-4 last"><a href="#Link2.4">Category 4</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="level0 nav-2 parent" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"> 
 
     <a href="javascript:void(0)"> <span>Products</span> 
 
     </a> 
 
     <ul class="level0 nav-2 parent"> 
 
     <li class="level1 nav-2-1 first"><a href="#Link3.1">Product 1</a> 
 
     </li> 
 
     <li class="level1 nav-2-2"><a href="#Link3.2">Product 2</a> 
 
     </li> 
 
     <li class="level1 nav-2-3 llast"><a href="#Link3.3">Product 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

источник

2016-02-26 Osmani

Прочтите следующее: [Как создать минимальный, завершенный и проверяемый пример] (http://stackoverflow.com/help/mcve). У вашего сообщения слишком много кода для чтения. например, как все, что css имеет отношение к изменению html через jquery? (если я полностью не понял, что вы пытаетесь сделать). Также укажите, что вы пробовали (jquery, который в настоящее время не работает). –

Почему бы просто не использовать CSS для вашего мобильного меню версии. например:

jQuery.('.btn-toggle').click(function(e){ 
    e.preventDefault(); 
    jQuery.('.mainMenu').toggleClass('mobile-menu'); 
});

тогда CSS будет:

.mainMenu.mobile-menu { 
    //mainwrapstyles 
} 
.mainMenu.mobile-menu > li { 
    //1st level li style 
} 
.mainMenu.mobile-menu > li .sm_megamenu_dropdown_1column { 
    //col1 wrap styles 
} 

.mainMenu.mobile-menu > li .sm_megamenu_dropdown_1column .sm_megamenu_col_1 { 
    //col1 inner wrap styles 
} 
........... 

.mainMenu.mobile-menu > li .sm_megamenu_dropdown_1column .sm_megamenu_col_1 .sm_megamenu_title { 
    //Text style 
}

с помощью CSS вы можете имитировать стили UL LI. Так что нет необходимости в тяжелом сценарии JS

источник

2016-02-26 10:16:11

Как изменить навигационный html с помощью jQuery?

ответ

Смежные вопросы