0

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

就像在这个例子中http://jsfiddle.net/YA2Yz/11/

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

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

我不确定如何找到这个元素 <li><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>

并使用 jQuery 从dirto更改类has-submenu <li><span class="has-submenu"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>

这个jsFiddle链接具有我想要更改以获得所需结果的实际代码，如上面的链接示例所示。

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

HTML 代码：

<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>
4

4 回答 4

1

尝试这个：-

演示

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

});
于 2013-05-20T05:57:11.867 回答
1

这是一个简单的方法，它包含的文档就绪函数只是告诉 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 选择器一样工作，以定位 #nav-wrapper 内 ul 内的 li 内的任何跨度：

#nav-wrapper ul li span{
  }
于 2013-05-20T06:02:36.717 回答
0 
$(document).ready(function(){
    $("#nav li").each(function() {
    if($(this) .has('ul')) {
      $(this).addClass('has-submenu');   
    }
    });  
});

或者，如果您想使用 php，那么您必须显示生成菜单的 php 代码。

于 2013-05-20T05:56:34.117 回答
0

尝试这个：

$(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/

于 2013-05-20T06:34:07.587 回答