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

Question

我有这个 JS 小提琴：

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

菜单 1：

点击 AAA 时会打开一个菜单。 单击 BBB 时，它会打开另一个菜单并将 AAA 样式删除为默认值。再次单击 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>

Answer 1

在.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');
});

Updated Fiddle link