jQuery:如何创建一个菜单和子菜单，每次单击时类都会在其中切换

jQuery: How to create a menu and a submenu where the classes toggle on each click

本文关键字：菜单 单击 在其中 何创建 创建 jQuery 一个      更新时间：2023-09-26

我有这个JS小提琴：

https://jsfiddle.net/zczwjdrw/7/

菜单1:

单击AAA时，会打开一个菜单。当点击BBB时，它会打开另一个菜单，并将AAAs样式删除为默认样式。当再次点击BBB时，它会关闭子菜单，但不会变回默认值。我该如何解决此问题？

菜单2:

当点击一个子菜单选项时，它会给它上色。当点击另一个选项时，不会从上一个元素中删除类。并且您可以继续为所有子菜单选项着色。解决这个问题的办法是什么？我在jQuery上使用了与.sidebar1相同的功能。

jQuery:

$('.sidebar1 a').click(function(){
    $(this).addClass('active-sb1').siblings().removeClass('active-sb1');
});
$('.sidebar2 a').click(function(){
    $(this).addClass('active-sb2').siblings().removeClass('active-sb2');
});

HTML:

<div class="main-wrapper">
    <div class="sidebar1">
        <a href="ssb1" class="category" id="sb1" onclick="return false">
            <div>AAA</div>
        </a>
        <a href="ssb2" class="category" id="sb2" onclick="return false">
            <div>BBB</div>
        </a>
        <a href="ssb3" class="category" id="sb3" onclick="return false">
            <div>CCC</div>
        </a>
    </div>
    <div class="sidebar2" id="ssb1" style="display: none;">
        <div class="sb2-content">
            <h3>Choose Something:</h3>
        </div>
        <div class="sb2-menu">
            <ul>
                <li>
                    <a href="kas" onclick="return false">AAAAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="weekly_reports" onclick="return false">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="exceltower" onclick="return false">AAAAAAAAAAA</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="sidebar2" id="ssb2" style="display: none;">
        <div class="sb2-content">
            <h3>Choose Something:</h3>
        </div>
        <div class="sb2-menu">
            <ul>
                <li>
                    <a href="#">BBBBBBBBBB</a>
                </li>
                <li>
                    <a href="#">BBBBBBBBBB</a>
                </li>
                <li>
                    <a href="#">BBBBBBBBBB</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="sidebar2" id="ssb3" style="display: none;">
        <div class="sb2-content">
            <h3>Choose Something:</h3>
        </div>
        <div class="sb2-menu">
            <ul>
                <li>
                    <a href="#">CCCCCCCCC</a>
                </li>
                <li>
                    <a href="#">CCCCCCCC</a>
                </li>
                <li>
                    <a href="#">CCCCCCCC</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <div class="user-bar">
        </div>
        <div class="content">
        </div>
    </div>
</div>

在.sidebar2中，<a>元素位于<li>内部，因此<a>没有其他同级元素。但父母<li>有兄弟姐妹。所以，你可以试试这样的东西：

$('.sidebar2 a').click(function() {
    var e = $(this);
    e.addClass('active-sb2');
    e.parent().siblings().children().removeClass('active-sb2');
});

对于第一个问题，您可以测试该元素是否已经具有类active-sb1，这意味着该元素是打开的，在这种情况下，您可以删除该类。

$('.sidebar1 > a').click(function() {
    var e = $(this);
    if (e.hasClass("active-sb1")) {
      e.removeClass('active-sb1');
    } else {
      e.addClass('active-sb1');
    }
    e.siblings().removeClass('active-sb1');
});

更新的Fiddle链接

相关文章：