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

提琴手