單擊鏈接時顯示 div

Question

我有以下代碼部分。

我想最初隱藏sub-menu並在單擊鏈接Type顯示。 我該怎么做呢？

http://jsfiddle.net/jk30af2a/

<div class="thirdy">
    <ul class="sf-menu" style="list-style-type:none">
        <li class="main"><a href="#">Type</a>
          <ul class="sub-menu">
            <li><a href="/teams/" title="View all Teams" >Teams</a></li>
            <li><a href="/events/" title="View all Events" >Event</a></li>
           </ul>
        </li>
    </ul>
</div>

Answer 1

您可以在元素上編寫單擊事件並在單擊處理程序中切換其下一​​個同級：

$('.main a').click(function(){
   $(this).next().toggle()
}).click();//<-- for hiding the options by default on load

工作演示

Answer 2

你的代碼是這樣的http://jsfiddle.net/elviz/045z9gdr/1/

$(".sub-menu").toggle();
     $(".main").click(function(){
       $(".sub-menu").toggle();
 });

Answer 3

您可以使用toggleClass()

查詢

 $(".main").click(function(){
    $(this).find($(".sub-menu")).toggleClass("hidden");
});

CSS

.hidden{
    display: none;
}

提琴手