Question

我有一个水平菜单，它有子菜单我也只想更改父菜单悬停效果的背景颜色，如果它有子菜单。

中一样

在上面的示例中，我正在对has-submenu进行硬编码以获得所需的效果，但问题是我的实际菜单是从数据库和动态生成的。到目前为止，我还没有找到一种方法来从代码本身分配has-submenu类来使其工作。

所以我正在寻找的解决方案是使用jquery将新的CSS类添加到只有那些有子菜单的元素。

我不确定我怎么能找到这个元素 <li><a href="#">CATEGORIES</a>|

并使用jQuery从dir更改为has-submenu <li><a href="#">CATEGORIES</a>|

此jsFiddle链接包含我想要更改的实际代码，以获得所需的结果，如上面的链接示例所示。

http://jsfiddle.net/YA2Yz/10/

HTML CODE：

<div id="nav-wrapper">
    <ul class="dropdown dropdown-linear" id="nav">
        <li class="active"><span class="dir"><a href="#">HOME</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ABOUT US</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ARTICLES</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>
            <ul>
                <li><a href="#">Politics</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Economy</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Business</a><span id="menus-spacer">|</span></li>
            </ul>
        </li>   
        <li><span class="dir"><a href="#">ARCHIVE</a></span><span id="menus-spacer">|</span>
            <ul>
                <li><a href="#">2013</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2012</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2011</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2010</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2009</a><span id="menus-spacer">|</span></li>
            </ul>
        </li>
        <li><span class="dir"><a href="#">NEWS</a></span><span id="menus-spacer">|</span></li>
    </ul>
</div>

Answer 1

试试这个： -

Demo

$(function () {
     $('#nav > li').on('mouseenter mouseleave', function () {
        if ($(this).find('ul').length > 0) {
            $(this).find('.dir').toggleClass('has-submenu');
        }
    });

});

Answer 2

这是一个简单的方法，它包含的文档就绪函数只是告诉jQuery在页面加载完成时正确执行：

$(document).ready(function() { 
  $("#nav-wrapper ul li span").removeClass("dir").addClass("has-submenu");
});

http://jsfiddle.net/YA2Yz/16/

jQuery使用与css相同的方法来选择一个元素，因此＃nav-wrapper ul li span也可以像css选择器一样工作，以定位#avan中ul内部的任何跨距包装器：

#nav-wrapper ul li span{
  }

Answer 3

$(document).ready(function(){
    $("#nav li").each(function() {
    if($(this) .has('ul')) {
      $(this).addClass('has-submenu');   
    }
    });  
});

或者如果你想通过php然后你必须显示你的PHP代码生成菜单。

Answer 4

试试这个：

$(function(){
    $('ul.dropdown > li').hover(function(){
        if($(this).find('ul'))
        {
            $(this).find('ul').addClass('sub-menu');                
        }
    },function(){
        if($(this).find('ul'))
        {
            $(this).find('ul').removeClass('sub-menu');                
        }
    });
});

小提琴：http://jsfiddle.net/YA2Yz/17/

使用jquery更改具有子菜单的UL列表菜单的类

4 个答案:

Demo