jQuery的：菜單出現/消失點擊 - V2這個問題的

Question

V1可以在這裏找到：jQuery: menus appear/disappear on click

的第一個問題不同的是我的HTML結構。一旦我開始使用CSS實現megamenus，事情並沒有顯示出我需要的方式。

這裏是基本的HTML：

<ul> 
<li><span>Products &amp; Services (1)</span></li> 
<li><span>Support &amp; Training (2)</span></li> 
<li><span>Communities (3)</span></li> 
<li><span>Store (4)</span></li> 
</ul> 
<div class="megamenu">1111</div> 
<div class="megamenu">2222</div> 
<div class="megamenu">3333</div> 
<div class="megamenu">4444</div> 

與第一菜單，這正是我需要的：

我需要一種方法來讓每個鏈接激活自己的megamenu，和每個megamenu應關閉時：

1. 用戶點擊另一個項目在導航欄中。
2. 用戶在導航欄中單擊相同的項目。
3. 用戶單擊megamenu中的「關閉按鈕」（X）圖形（爲簡單起見，未在HTML中顯示）。

我知道這與Tabs的工作方式非常相似，區別在於每個標籤容器可以關閉/摺疊。那有意義嗎？

同樣，我不是一個jQuery/JS人（你可以看到），所以任何幫助將非常感激。

感謝，

Answer 1

它應該是相當簡單的你早先accepted answer需要適應。您仍然有span（儘管我沒有看到頂級導航ID）。

您需要查看.click處理程序。您還需要弄清楚如何將包含megamenu的div與每個要觸發它的跨度相關聯。唯一ID可能有效。

Answer 2

我會使用CSS diplay屬性+ id屬性，像這樣：

<script> 
    current = "m0"; // div with id="m0" is currently diplayed 
    function show_or_hide (id) 
    { 
     if (current) //if something is displayed 
     { 
      document.getElementById (current).style.display = "none"; 
      if (current == id) //if <div> is already diplayed 
      {       
       current = 0; 
      } 
      else 
      { 
       document.getElementById (id).style.display = "block"; 
       current = id; 
      } 
     } 
     else //if nothing is displayed 
     { 
      document.getElementById (id).style.display = "block"; 
      current = id; 
     } 
    } 
</script> 

<ul> 
<li onclick="show_or_hide('m0')"><span>Products &amp; Services (1)</span></li> 
<li onclick="show_or_hide('m1')"><span>Support &amp; Training (2)</span></li> 
<li onclick="show_or_hide('m2')"><span>Communities (3)</span></li> 
<li onclick="show_or_hide('m3')"><span>Store (4)</span></li> 
</ul> 
<div class="megamenu" id="m0">1111</div> 
<div class="megamenu" id="m1" style="display: none">2222</div> 
<div class="megamenu" id="m2" style="display: none">3333</div> 
<div class="megamenu" id="m3" style="display: none">4444</div> 

Answer 3

下面是這個問題的答案，我無法找到一種方法，使用HTML結構上面我提到：

HTML

<div id="megamenus" class="click-menu"> 
<h6>Link 1</h6> 
<div>Content...</div> 
<h6>Link 2</h6> 
<div>Content...</div> 
<h6>Link 3</h6> 
<div>Content...</div> 
</div> 

jQuery的

$(function(){ 
//Megamenus 
$('.click-menu div').hide(); 
$('.click-menu h6').click(function(){ 
    if ($(this).hasClass('selected')) { 
    $(this).removeClass('selected'); 
    $(this).parent().next().slideUp('fast'); 
    } else { 
    $('.click-menu h6').removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.click-menu div').slideUp('fast'); 
    $(this).parent().next().slideDown('fast'); 
    } 
    }); 
});