Question

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

这是我的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 - 该元素将被选中，而不是subnav！

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

Answer 2

最简单的方法是在每次点击时隐藏所有<subnav>。您现有的所有代码都可以正常运行，这些代码已经完成了切换相关<subnav>。

的工作

var $subNavs = $('subnav');
$subNavs.hide();

$('ul.hsn-nav-items li a').click(function () {
    $subNavs.hide();

    var navitem = $(this).attr('id')
        , id = $(this).attr('class')
        , subnav = $('subnav.' + id + '-subnav');
    $('a.selected').not(this).removeClass('selected');
    $(this).toggleClass('selected');
        $('#'+id).toggle();
    return false;
});

我还添加了return false;来停止正在执行的<a>上的默认点击事件，这可能导致自href="#"以来的页面加载。

那就是说，<subnav>是一个非标准元素，你最好用一个更简单的标记来描述数据。为每个subnav提供一个通用类，使得通过jQuery更容易找到它们也可能是有用的。

我还使用以下简化代码

制作了small demo

HTML

<a class="shop" href="#">
    <span class="hsn-nav-item-wrap">
        <span>SHOP</span><span class="drop-down-arrow"></span>
    </span>
</a><br/>
<a class="watch" href="#">
    <span class="hsn-nav-item-wrap">
        <span>WATCH</span><span class="drop-down-arrow"></span>
    </span>
</a><br/>
<a class="play" href="#">
    <span class="hsn-nav-item-wrap">
        <span>PLAY</span><span class="drop-down-arrow"></span>
</span>
</a>
<div id="shop" class="shop subnav">
shop
</div>
<div id="watch" class="watch subnav">
watch
</div>
<div id="play" class="play subnav">
play
</div>

的JavaScript

var $subNavs = $('.subnav');
$subNavs.hide();

$('a').click(function () {
    var $subNavToToggle = $('#' + ($(this).attr('class').split(' ')[0]));
    var doToggle = $subNavToToggle.is(':not(:visible)');
    $subNavs.hide();

    $('a.selected').not(this).removeClass('selected');
    $(this).toggleClass('selected');

    $subNavToToggle.toggle(doToggle);

    return false;
});

显示隐藏子窗口

2 个答案: