如何使用jQuery在当前元素上应用CSS类

Question

我正在尝试创建一个多级菜单。单击菜单时，只应打开当前子菜单...但在我的情况下，所有子菜单都会打开。

我的jQuery代码：

$(document).ready(function () {
    $('.showHide').click(function() {
        $('ul.show li').slideToggle('slow');
    });
});

这是我的小提琴网址http://fiddle.jshell.net/krishnalucky/5e7oq7po/1/

在我的菜单中，当我点击“衣服”时，只有服装子菜单应该打开。

Answer 1

如果您不想更改HTML或CSS，请将您的JQuery更改为：

 $(document).ready(function () {
    $('.showHide').click(function() {
        $(this).next().find('li').slideToggle('slow');
    });
});

修改：

以下是具有有效HTML的基本版本，您应该使用此版本并在此处构建，否则您可能会遇到意外行为。

HTML：

    <nav id="navMenu">
    <ul id="menu">
        <li>
            <ul>
                <li class="showHide">
                    <h1><a href="#">Clothing</a></h1>
                </li>
                <li>
                    <ul class="show">
                        <li><a href="#">Casual & Party Wear Shirts </a></li>
                        <li><a href="#">Jeans</a></li>
                        <li><a href="#">Formal Shirts</a></li>
                        <li><a href="#">Trousers & Chinos</a></li>
                        <li><a href="#">T shirts & Polo's</a></li>
                        <li><a href="#">Cargo, Shorts & 3/4ths</a></li>
                        <li><a href="#">Ethinic wear</a></li>
                    </ul>
                </li>
                <li class="showHide">
                    <h1><a href="#">Foot Wear</a></h1>
                </li>
                <li>
                    <ul class="show">
                        <li><a href="#">Sport Shoes</a></li>
                        <li><a href="#">Casual Shoes</a></li>
                        <li><a href="#">Formal Shoes</a></li>
                        <li><a href="#">Sandals and Floaters</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS：

        nav {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        background: #fff;
        color: #000;
    }

        nav ul#menu {
            display: block;
            margin: 0;
            padding: 0;
            list-style: none;
        }

            nav ul#menu li {
                display: block;
            }

    .show {
        display: none;
    }

JS：

    $(document).ready(function () {
        $('.showHide').click(function () {
            $(this).next().find('.show').slideToggle('slow');
        });
    });

Answer 2

您可以尝试这样的事情：

$(document).ready(function () {
    $('.showHide').click(function() {
      $(this).find(" + ul.show li").slideToggle("slow");
    });
});

但如果您按照此处的建议更改标记会更好。

祝你好运。

Answer 3

在上一个菜单中使用不同的类，如

<nav id="navMenu">
<ul id="menu">
<li><a href="#">Men</a>
    <ul>
        <h1 class="showHide"><a href="#">Clothing</a>
        </h1>
        <ul class="show">
            <li><a href="#">Casual & Party Wear Shirts </a></li>
            <li><a href="#">Jeans</a></li>
            <li><a href="#">Formal Shirts</a></li>
            <li><a href="#">Trousers & Chinos</a></li>
            <li><a href="#">T shirts & Polo's</a></li>
            <li><a href="#">Cargo, Shorts & 3/4ths</a></li>
            <li><a href="#">Ethinic wear</a></li>
        </ul>
    </ul>
    <ul>
        <h1 class="showHide1"><a href="#">Foot Wear</a></h1>
        <ul class="show1">
            <li><a href="#">Sport Shoes</a></li>
            <li><a href="#">Casual Shoes</a></li>
            <li><a href="#">Formal Shoes</a></li>
            <li><a href="#">Sandals and Floaters</a></li>
        </ul>   
    </ul>

</li>
</ul>
</nav>

你的javascript应该是

$(document).ready(function () {
        $('.showHide').click(function() {
            $('ul.show li').slideToggle('slow');
        });
        $('.showHide1').click(function() {
            $('ul.show1 li').slideToggle('slow');
        });
    });

Answer 4

试试这个：

$(document).ready(function () {
    $('.showHide').click(function() {
        $(this).next('ul.show').children().slideToggle('slow');
    });
});