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>を切り替えたが、その後ID属性と.hide()それら表示される場合がありますその.siblings()を見ない何を。

---

マークアップがでロックされていない場合、あなたはこのようにそれをさらに簡素化できます。このような

<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を見つける。