1

各アイテムのサブナビを切り替えるにはどうすればよいですか?また、開いている場合は、開いているサブナビを非表示にして現在のサブナビを表示するにはどうすればよいですか? 何も表示されていない場合は、切り替えてください。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 が重複しています。「再生」にリンクする「a」にも「再生」の ID があります。サブナビではなく、その要素が選択されます。

また、あなたのリンクの 2 つは分類された時計であり、ショップはありません。

于 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>は非標準の要素であり、より単純なマークアップを使用してデータを記述したほうがよいでしょう。また、各サブナビに共通のクラスを与えて、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 に答える