这是我的HTML代码。我想将html div标签转换为移动菜单的list-items标签。我正在创建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>
答案 0 :(得分：0)
为什么不在您的移动版菜单中使用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脚本