使用jquery显示和隐藏内容？

Question

HTML

<ul class="services_menu">
    <li>
        <div class="servic">
            <a class="servic_icon" onclick="dispServices(this)"><i class="ux1"></i><span class="tx">UX</span></a>
            <ul class="toggleSubService">
                <li>Wireframing</li>
                <li>Content Strategy</li>
                <li>Information Architecture</li>
            </ul>
        </div>
    </li>
    <li>
        <div class="servic">
            <a class="servic_icon" onclick="dispServices(this)"><i class="ux2"></i><span class="tx">DESIGN</span></a>
            <ul class="toggleSubService">
                <li>Branding</li>
                <li>Web Design</li>
                <li>Web Design</li>
                <li>Web Design</li>
            </ul>
        </div>
    </li>
</ul>

CSS

.toggleSubService{ display:none; }

JS

function dispServices(e) {
    e = $(e);
    e.parent().find('ul.toggleSubService').fadeToggle(300);
}

问题：

点击一个包含.servic_icon类的标签我要显示并隐藏ul.toggleSubService，如果点击body或ul.toggleSubService外，ul.toggleSubService需要隐藏。 我不知道如何触发我的点击事件。

如果我点击a.servic_icon并再次点击另一个a.servic_icon，则前一个没有隐藏。

Answer 1

使用此jQuery

$('.servic_icon').click(function(){
    $(this).closest('div.servic').find('ul').toggle();
});

小提琴demo

Answer 2

  

function validateSubmit2（id）{if（id）{$（“＃”+ id）.hide（

      }