如何使用jQuery更改导航html？

这是我的HTML代码。我想将html div标签转换为移动菜单的list-items标签。我正在创建jQuery代码，但它无法正常工作。如何使用jQuery更改导航html？

.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都与通过jQuery改变html相关？（除非我完全误读你想做的事）。还请包括你已经尝试过（目前不工作的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

如何使用jQuery更改导航html？

回答

相关问题