jQuery切換菜單隱藏/顯示（當新菜單打開時關閉其他菜單）

Question

感謝Nick Craver我有一個不錯的切換菜單，但是我想到了如果用戶不斷點擊新菜單頁面將會繼續增長，我不想要，所以這個想法是：

作爲一個菜單打開，任何當前打開的菜單關閉。

完整源@http://the-dot.co.uk/new/

這裏是我使用的代碼的片段2。

和HTML結構

<ul class="navigation"> 
    <li><a name="us" title="us">Us</a></li> 
    <li id="us">about thedot</li> 
    <li><a name="portfolio" title="portfolio">Portfolio</a></li> 
    <li></li> 
    <li><a name="contact" title="contact">Contact</a></li> 
    <li id="contact">contact deets 
    </li> 
    <li><a name="twitter" title="twitter">Twitter</a></li> 
    <li id="twit">some twitter shit</li> 
    <li><a href="#">Blog</a></li> 
    </ul> 

感謝。

Answer 1

你可以做這樣的事情：

$(function() { 
    $("ul li a").click(function() { 
     $(this).parent().next().toggle("fast").siblings("[id]").hide("fast"); 
    }); 
}); 

You can test it out here，這是什麼它切換兄弟<li>還在，但後來看着其.siblings()有一個ID屬性和.hide()他們，如果節目。

---

如果標記沒有被鎖定，您就能夠進一步簡化這樣的：

<ul class="navigation"> 
    <li class="toggle">Us</li> 
    <li class="content">about thedot</li> 
    <li class="toggle">Portfolio</li> 
    <li class="content"></li> 
    <li class="toggle">Contact</li> 
    <li class="content">contact deets</li> 
    <li class="toggle">Twitter</li> 
    <li class="content">some twitter shit</li> 
    <li><a href="#">Blog</a></li> 
</ul> 

而且這樣的腳本：

$(function() { 
    $("li.content").hide(); 
    $("ul.navigation").delegate("li.toggle", "click", function() { 
     $(this).next().toggle("fast").siblings(".content").hide("fast"); 
    }); 
}); 

它喜好的問題，但我發現這種方法更清潔，更具風格，check out the result here。