如何在用户单击其他位置时使用jquery隐藏ul

我使用此代码切换

ul

可见性

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

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

当用户在

ul

之外单击时，如何切换此选项

我试着在这里使用答案，但没有用：

更新

我的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，正文{高度：100%；宽度：100%；边距：0；}
#主导航{宽度：65px；左边距：10px；}
#导航main.sf菜单主界面{显示：无；}
#导航main.sf菜单main li{背景：e73420；边框顶部：1px实心rgba（0,0,0,0.1）；宽度：235px；清除：两个；填充：5px 0px 5px 15px；颜色：#fff；}
#导航main.sf菜单main li li a{宽度：250px；填充：5px 10px 5px 15px；颜色：#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，但没有成功

检查

$（e.target）

。如果它是除

ul

之外的任何其他内容，或者如果它是

主体

，则隐藏它，否则显示它

演示：

JS:

这是你期待的吗

HTML

---

完美的毫无生气地工作。。再问一个问题。。如果我有两个相似的菜单呢？应该为两者创建两个不同的脚本，或者如果我单击其中一个，是否有相同的原因

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

<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();
    });
});