Question

我有两个侧边栏菜单Income和Expense。每个菜单下都有一些子菜单。我希望每当我点击Income菜单时，子菜单就会显示在它下面。但只要点击Expense，其他子菜单就会显示在其下方，Income菜单的子菜单会变为隐藏。但在我的网站上，这些是相互重叠的。

这是html

<nav class="sidebar-nav">
        <ul id="sidebarnav">
            <li>
                <a href="/title" class="waves-effect"><i class="fa fa-clock-o m-r-10" aria-hidden="true"></i>Title</a>
            </li>
            <li class="nav-item-one">
                <a href="" class="waves-effect"><i class="fa fa-user m-r-10" aria-hidden="true"></i>
                    <span class="menu-title">Income</span></a>

                <ul class="menu-content">
                    <li>
                        <a href="/income" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Add Income
                        </a>
                    </li>
                    <li>
                        <a href="/dailyIncomeReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Daily Report
                        </a>
                    </li>
                </ul>

            </li>
            <li class="nav-item-two">
                <a href="" class="waves-effect"><i class="fa fa-table m-r-10" aria-hidden="true"></i>
                    <span class="menu-title">Expense</span></a></a>

                <ul class="menu-content-two">
                    <li>
                        <a href="/expense" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Add Expense
                        </a>
                    </li>
                    <li>
                        <a href="/dailyExpenseReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Daily Report
                        </a>
                    </li>
                </ul>
            </li>                        
        </ul>
    </nav>

    <script type="text/javascript">
         $(document).ready(function($) {

            //$('.menu-content').hide();

            $(".nav-item-one:has(ul)").click(function(){
                ('.menu-content-two').hide();
                $("ul",this).toggle('slow');
            });


            //$('.menu-content-two').hide();

            $(".nav-item-two:has(ul)").click(function(){
                $('.menu-content').hide();
                $("ul",this).toggle('slow');
            });
        });
    </script>

Answer 1

这就是你要找的东西。

＆＃13;

$(".nav-item-one").click(function(){

                $('.menu-content-two').hide();
                $("ul",this).toggle('slow');
            });


            //$('.menu-content-two').hide();

            $(".nav-item-two").click(function(){
                $('.menu-content').hide();
                $("ul",this).toggle('slow');
            });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="sidebar-nav">
        <ul id="sidebarnav">
            <li>
                <a href="/title" class="waves-effect"><i class="fa fa-clock-o m-r-10" aria-hidden="true"></i>Title</a>
            </li>
            <li class="nav-item-one">
                <a href="javascript:;" class="waves-effect"><i class="fa fa-user m-r-10" aria-hidden="true"></i>
                    <span class="menu-title">Income</span></a>

                <ul class="menu-content">
                    <li>
                        <a href="/income" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Add Income
                        </a>
                    </li>
                    <li>
                        <a href="/dailyIncomeReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Daily Report
                        </a>
                    </li>
                </ul>

            </li>
            <li class="nav-item-two">
                <a href="javascript:;" class="waves-effect"><i class="fa fa-table m-r-10" aria-hidden="true"></i>
                    <span class="menu-title">Expense</span></a>

                <ul class="menu-content-two">
                    <li>
                        <a href="/expense" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Add Expense
                        </a>
                    </li>
                    <li>
                        <a href="/dailyExpenseReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
                            Daily Report
                        </a>
                    </li>
                </ul>
            </li>                        
        </ul>
    </nav>

＆＃13;

侧边栏子菜单在jquery中切换

1 个答案: