1

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

这是我的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();
});

});

4

2 回答 2

0

只需浏览您的 html - 您有重复的 ID。链接到“play”的“a”也有一个 ID 为“play”——将选择该元素，而不是 subnav！

此外，您的两个链接是分类手表，没有商店。

于 2012-11-02T16:17:42.180 回答
0

解决此问题的最简单方法是<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 找到它们更简单。

我还使用以下简化代码做了一个小演示

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;
});
于 2012-11-02T16:58:42.743 回答