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

Change Class of UL list menu which has submenus using jquery

本文关键字：菜单 UL 列表 jquery 使用      更新时间：2023-09-26

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

就像这个例子一样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将类从dir更改为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>

试试这个：-

Demo

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

这里有一个简单的方法，它包装的文档就绪函数只会告诉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{
  }

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

或者，如果你想通过php，那么你必须显示生成菜单的php代码。

试试这个：

$(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');                
        }
    });
});

Fiddle：http://jsfiddle.net/YA2Yz/17/

相关文章：