顯示隱藏Subnav

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更簡單的找到它們也是有用的。

我曾嘗試使用下面的簡化代碼

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; 
});