单击链接时显示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

<强> Working Demo

Answer 2

您的代码类似于此http://jsfiddle.net/elviz/045z9gdr/1/

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

Answer 3

您可以使用toggleClass()

Jquery的

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

CSS

.hidden{
    display: none;
}

JsFiddle