jquery - 如何使用 jQuery 更改导航 html？

Question

这是我的 HTML 代码。我想将 html div 标签转换为移动菜单的列表项标签。我正在创建 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>

Answer 1

为什么不为您的移动版本菜单使用 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 脚本