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

更新了小提琴鏈接