当用户点击别处时如何使用jquery隐藏ul答案

【问题标题】：How to hide ul using jquery when users click elsewhere当用户点击别处时如何使用jquery隐藏ul
【发布时间】：2023-04-09 04:34:01
【问题描述】：

我有这段代码来切换ul 的可见性。

$('.cliackable').click(function(){ $(this).find('ul').toggle(); });

$('.cliackable').click(function(event) {
    event.stopPropagation();
});

当用户在ul 之外点击时如何切换？

我尝试在这里使用答案但无济于事：jQuery toggle hide on click elsewhere

更新

我的 CSS 看起来像这样

<!-- language: css -->
html, body {height:100%;width:100%;margin:0;}
#navigation-main {width:65px;margin-left:10px;}
#navigation-main .sf-menu-main li ul {display:none;}
#navigation-main .sf-menu-main li li {background:#e73420;border-top:1px solid rgba(0,0,0,0.1); width: 235px; clear:both; padding:5px 0px 5px 15px; color:#fff;}
#navigation-main .sf-menu-main li li a {width: 250px; padding:5px 10px 5px 15px; color:#fff;}

和 html

<div id="navigation-main">
    <ul class="sf-menu-main">
        <li style="color:#fff;" class="clickable">
            Menu
            <ul>
                <li>
                    <a class="login-head-font" href="">Home</a>
                </li>
                <li>
                    <a class="login-head-font" href="">Events</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我试过用你的js但是没用

【问题讨论】：

标签： jquery toggle

【解决方案1】：

这是你的预期吗？

http://jsfiddle.net/utgc0981/2/

HTML

<div id="navigation-main">
    <ul class="sf-menu-main">
        <li class="clickable">Menu
            <ul class="sf-menu-sub">
                <li> <a class="login-head-font" href="">Home</a>

                </li>
                <li> <a class="login-head-font" href="">Events</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

$(function () {
    var sf_menu_sub = $('.sf-menu-sub');
    $('.clickable').on('click', function (e) {
        e.stopPropagation();
        sf_menu_sub.toggle();
    });
    $(document).on('click', function (e) {
        sf_menu_sub.hide();
    });
});

【讨论】：

完美！！工作无懈可击.. 只需再查询一个.. 如果我有两个相似的菜单怎么办？应该为两者创建两个不同的脚本，或者如果我点击一个，是否有办法解决相同的原因，两个 ul 都会出现

【解决方案2】：

检查 $(e.target) 。如果是 ul 以外的其他任何内容，或者如果是 body，则隐藏它，否则显示它。

演示：http://jsfiddle.net/lotusgodkk/GCu2D/344/

JS：

$(document).ready(function () {
    $('.checked').click(function (e) {
        $('ul').show();
    });
    $(document).on('click', function (e) {
        if ($(e.target).is('body')) {
            $('ul').hide();
        }
    })
});

【讨论】：