javascript - 显示隐藏子导航

Question

如何切换每个项目的子导航，如果有一个项目打开，则隐藏打开的项目以显示当前项目？如果没有显示，只需切换即可。如果您单击一个并显示子导航，然后单击另一个隐藏上一个并显示当前。

这是我的 html -

<header>
    <div class="content-wrapper">
        <div class="user-menu-wrapper">
            <div class="hsn-logo"></div>
            <div class="user-greeting-wrapper">
                <div class="user-greeting">Hi, Abraham</div>
            </div>
            <div class="user-menu">
                <ul class="user-menu-items">
                    <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-account" })</li>
                    <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-favorites" })</li>
                    <li>@Html.ActionLink(" ", "Index", "Home", new { @class = "my-bag" })</li>
                </ul>
            </div>
        </div>
        <div class="hsn-nav-wrapper">
            <div class="hsn-nav">
                <ul class="hsn-nav-items">
                    <li style="width: 25%">
                        <a class="shop" href="#">
                            <span class="hsn-nav-item-wrap">
                                <span>SHOP</span><span class="drop-down-arrow"></span>
                            </span>
                        </a>
                    </li>
                    <li style="width: 25%">
                        <a class="watch" href="#">
                            <span class="hsn-nav-item-wrap">
                                <span>WATCH</span><span class="drop-down-arrow"></span>
                            </span>
                        </a>
                    </li>
                    <li style="width: 25%">
                        <a class="play" href="#">
                            <span class="hsn-nav-item-wrap">
                                <span>PLAY</span><span class="drop-down-arrow"></span>
                        </span>
                        </a>
                    </li>
                    <li style="width: 15%">
                        <a href=""><span class="hsn-search-icon"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <br class="clear" />
        </div>
    </div>
</header>
<subnav id="shop" class="shop-subnav">
    <div class="hsn-subnav-wrapper">
        <div class="hsn-subnav">
            <div class="hsn-subnav-left">
                <ul>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li><span class="hsn-subnav-callout">Deals</span></li>
                </ul>
            </div>
            <div class="hsn-subnav-right">
                <ul>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li>SubnavItem</li>
                    <li><span class="hsn-subnav-callout">Clearance</span></li>
                </ul>
            </div>
        </div>
    </div>
</subnav>
<subnav id="watch" class="watch-subnav">
    <div class="hsn-subnav-wrapper">
        <div class="hsn-subnav">
            <div class="hsn-subnav-left">
                <ul>
                    <li>SubnavItem2</li>
                    <li>SubnavItem2</li>
                    <li>SubnavItem2</li>
                    <li>SubnavItem2</li>
                </ul>
            </div>
            <div class="hsn-subnav-right">
                <ul>
                    <li>SubnavItem2</li>
                    <li>SubnavItem2</li>
                    <li>SubnavItem2</li>
                    <li>SubnavItem2</li>
                </ul>
            </div>
        </div>
    </div>
</subnav>

这是我的 Jquery/JS -

$(document).ready(function () {
$('ul.hsn-nav-items li a').click(function () {
    var navitem = $(this).attr('id')
        , id = $(this).attr('class')
        , subnav = $('subnav.' + id + '-subnav');
    $('a.selected').not(this).removeClass('selected');
    $(this).toggleClass('selected');
        $('#'+id).toggle();
});

});

Answer 1

只要浏览一下你的 html - 你就有重复的 ID。链接到“play”的“a”也有一个“play”ID - 该元素将被选择，而不是子导航!

此外，您的两个链接属于 watch 类，没有商店类。