Question

JSFiddle：https://jsfiddle.net/02eaovq3/1/。

如何进行此操作以便在单击按钮打开子菜单时，会出现但是所有其他按钮都被隐藏？

我尝试过将hide（）添加到所有.submenu项目中，但很明显这会产生冲突，阻止所有这些项目被打开。

HTML：

<div id="sidebarPrimary">

        <ul id="sidebarPrimaryNav">

            <li class="navButton"><a href="#" target="blank_">JA</a></li>

            <li id="homeButton" class="navButton active"><a href="index.html">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-home"></span>Home

                </div>

            </a></li>

            <li id="personalButton" class="navButton" show-id="personalMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-user"></span>Personal

                </div>

            </a></li>

            <li id="companyButton" class="navButton" show-id="companyMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-briefcase"></span>Company

                </div>

            </a></li>

            <li id="invoicesButton" class="navButton" show-id="invoicesMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-gbp"></span>Invoices

                </div>

            </a></li>

            <li id="contactsButton" class="navButton" show-id="contactsMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-address-book"></span>Contacts

                </div>

            </a></li>

            <li id="expensesButton" class="navButton" show-id="expensesMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-minus"></span>Expenses

                </div>

            </a></li>

            <li id="payslipsButton" class="navButton" show-id="payslipsMenu"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-list"></span>Payslips

                </div>

            </a></li>

        </ul>

    </div>

    <div id="personalMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">My Money</a></li>

            <li class="navButtonSub"><a href="#">My Details</a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Admin Details</a></li>

            <li class="navButtonSub"><a href="#">Contracts<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Dividends<span>2</span></a></li>

            <li class="navButtonSub"><a href="#">Timesheets<span>2</span></a></li>

            <li class="navButtonSub"><a href="#">Documents<span>2</span></a></li>

        </ul>

    </div>

    <div id="companyMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">Tax Settings</a></li>

            <li class="navButtonSub"><a href="#">Shareholders<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Company Warnings<span>6</span></a></li>

        </ul>

    </div>

    <div id="invoicesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Invoice</a></li>

            <li class="navButtonSub"><a href="#">List of Invoices<span>48</span></a></li>

        </ul>

    </div>

    <div id="contactsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Contact</a></li>

            <li class="navButtonSub"><a href="#">List of Contacts<span>50</span></a></li>

        </ul>

    </div>

    <div id="expensesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Expense</a></li>

            <li class="navButtonSub"><a href="#">List of Expenses<span>30</span></a></li>

        </ul>

    </div>

    <div id="payslipsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Create New Payslip</a></li>

            <li class="navButtonSub"><a href="#">List of Payslips<span>13</span></a></li>

        </ul>

    </div>

    <main>

        <div id="topnav">

            <div id="topnavLeft">

                <a class="button" href="#"><span class="fa fa-plus"></span>New Invoice</a>

            </div>

            <ul>

                <li class="navButton"><a href="#"><span class="fa fa-lg fa-sign-out"></span></a></li>

                <li class="navButton"><a href="#"><span class="fa fa-lg fa-question"></span></a></li>

                <li class="navButton"><a href="#"><span class="fa fa-lg fa-cog"></span></a></li>

            </ul>

        </div>

        <div id="mainContent">



        </div>

    </main>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="js/menu.js"></script>

JS：

$(document).ready(function() {

$('.navButton').click(function() {

    $('#'+$(this).attr('show-id')).toggleClass('open');

});

})

Answer 1

您只需要删除所有兄弟元素的open类属性：

$('#'+$(this).attr('show-id')).siblings().removeClass('open');

Fiddle

Answer 2

$(document).ready(function() {

    $('.navButton').click(function() {

        $('.submenu').removeClass('open');
        $('#' + $(this).attr('show-id')).addClass('open');

    });

});

https://jsfiddle.net/02eaovq3/3/

但最好使用父菜单容器中的子菜单进行导航。如果您不知道该怎么做 - 请在评论中提问，我会帮助您。此外，对于容器控件，您可以在href中设置id - 这对SEO更好

jQuery边栏 - 显示子菜单div并在按钮单击

2 个答案:

Fiddle