Question

我有此代码可以切换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但没有工作

Answer 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>

JS

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

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

当用户点击其他地方时，如何使用jquery隐藏ul

2 个答案: