如何将类添加到具有子项的菜单项

时间：2016-12-07 08:38:36

标签： jquery html css

我刚刚创建了菜单，其中一些项目有子项目，你可以在我的html结构中看到：

<nav id="site-navigation" class="main-navigation" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
        <a href="http://powersol.burnnotice.co.za/">Home</a>
      </li>
      <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
        <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
        <ul class="sub-menu">
          <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
            <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
          </li>
          <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
            <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
          </li>
          <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
            <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
          </li>
          <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
            <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
        <ul class="sub-menu">
          <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
            <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
          </li>
          <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
            <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
          </li>
          <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
            <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
        <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
      </li>
    </ul>
  </div>        
</nav>

对于css，我首先放置一个显示器，因为最初子菜单无法显示。

.main-navigation ul li{
    display: none;
}

现在，每当我将鼠标悬停在特定项目上时，如何向包含子项目的菜单项添加类下拉菜单？

这里是我的js但是当我将鼠标悬停在该项目上时它什么也没做：

$('.main-navigation ul > li.menu-item-has-children').on("hover" function(){
    $('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu');
    if($(this).hasClass('dropdown-menu')){
        $(this).addClass('dropdown-menu');
    }else{
        $(this).addClass('dropdown-menu');
    }
});

Here my pen if needed

2 个答案:

答案 0 :(得分：2)

试试这个演示，只使用css，检查下拉列表，这仅供参考

#primary-menu > li {
	display:inline-block;
	position:relative;
	margin:15px;
}
#primary-menu > li ul {
	position:absolute;
	left:0;
	padding:0;
	display:none;
}
#primary-menu > li ul li {
	white-space:nowrap;
}
#primary-menu > li:hover ul {
	display:block;
}
<nav id="site-navigation" class="main-navigation" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
        <a href="http://powersol.burnnotice.co.za/">Home</a>
      </li>
      <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
        <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
        <ul class="sub-menu">
          <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
            <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
          </li>
          <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
            <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
          </li>
          <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
            <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
          </li>
          <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
            <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
        <ul class="sub-menu">
          <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
            <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
          </li>
          <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
            <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
          </li>
          <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
            <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
        <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
      </li>
    </ul>
  </div>        
</nav>

答案 1 :(得分：0)

你可以自己做CSS :hover。但正如你所希望的jquery这里是解决方案

使用$('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave", function(e){。 mouseenter mouseleave取代hover 

$('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave",  function(e){
    $('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu');
    if(e.type=='mouseenter')
    $(this).addClass('dropdown-menu');
});
.main-navigation ul ul{
    display: none;
}
.main-navigation ul li.dropdown-menu ul{
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation">
    <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
        <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
            <a href="http://powersol.burnnotice.co.za/">Home</a>
        </li>
        <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
            <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
            <ul class="sub-menu">
                <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
                    <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
                </li>
                <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
                    <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
                </li>
                <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
                    <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
                </li>
                <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
                    <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
            <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
            <ul class="sub-menu">
                <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
                    <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
                </li>
                <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
                    <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
                </li>
                <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
                    <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
            <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
        </li>
    </ul>
    </div>        
</nav>

相关问题
最新问题