jquery div点击展开,点击收起,点击除了该div外任何地方,该div隐藏

html:

<ul class="ul_tabs_top>
     <li class="curtabli ><div class="curtaba"><a href="#tabs--11" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">法汉-汉法词典</a><i class="i_arrow" style=""></i></div>
           <ul class="curli_detail" id="tabDetailTitle" data-index="tabs--11">
                  <li class="detailTitle" data-explain="ExpFC" data-wiki="undefined">法汉-汉法词典</li>
                  <li class="detailTitle" data-explain="ExpSYN" data-wiki="undefined">近义、反义、派生词典</li>
                  <li class="detailTitle" data-explain="ExpSPEC" data-wiki="undefined">《当代法汉科技词典》</li>
                  <li class="detailTitle" data-explain="ExpLJ" data-wiki="undefined">法语例句库</li></ul></li>
     <li class="tabli ><div><a class="taba ui-tabs-anchor" href="/Dicts/fr/tab-detail/expcg" role="presentation" tabindex="-1" id="ui-id-5">法语动词变位</a><i class="i_arrow" style=""></i></div>
            <ul class="curli_detail" id="tabDetailTitle" data-index="ui-tabs-1"></ul>
    </li>
</ul>

jquery:

    //点击tab隐藏显示子标签
    $(".ul_tabs_top>li").live('click', function (e) {
        $("#exp_tabs").tabs({ collapsible: false });
        $(this).find('#tabDetailTitle').toggle();
        e.stopPropagation(); //阻止事件冒泡,否则事件会冒泡到下面的文档点击事件 
    });

    $(document).live("click", function (e) {
        var target = $(e.target);
        if (target.closest(".curli_detail").length == 0) {
            $(".curli_detail").hide();
        }
    })

猜你喜欢

转载自blog.csdn.net/wcy7916/article/details/82899047