Question

我想点击外面的框而不是（点击我）隐藏框。但是，当我点击框和链接时，我想要留下来。希望有人可以提供帮助。非常感谢。你们是最棒的。这是http://jsfiddle.net/hamdlink/y94nr/

 <style>
    ul li{
        list-style: none;
    }
        .click-me{
            display: inline;
        }
        .hidden{
            display:none;
            background: #333;
            width:150px;
            color:red;
            padding:30px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.click-me').click(function(){
                $('.hidden').slideDown();
            });

            $('body').click(function(e){
                if(e.target.className!=='click-me'){
                    $('.hidden').slideUp();
                }
            });
        });
    </script>
    <ul>
        <li class="click-me">click me
            <ul class="hidden">
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li>
            </ul>
        </li>
    </ul>

Answer 1

找到了这个：How do I detect a click outside an element?

此外，我们需要跟踪元素是否隐藏，因此它不会立即向上滑动。这是小提琴：http://jsfiddle.net/Fu8k4/1/

$(document).ready(function() {
    var hidden = true;
    $('.click-me').click(function() {
        if (hidden){
           $('.hidden').slideDown(400, function(){hidden = false;});
        }
    });

    $('html').click(function() {
        if (!hidden) {
            $('.hidden').slideUp();
            hidden=true;
        }
    });

    $('.hidden, .click-me').click(function(event) {
        event.stopPropagation();
    });
});

Answer 2

好的，请检查这个小提琴：http://jsfiddle.net/m8yBs/

我使用了我在其他堆栈溢出帖子中找到的代码：Use jQuery to hide a DIV when the user clicks outside of it

我使用的代码是：

$(document).mouseup(function (e) {
    var container = $(".hidden");

    if (!container.is(e.target) // if the target of the click isn't the container...
    &&
    container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('.hidden').slideUp();
    }
});

我希望它可以帮到你。祝你好运！

Answer 3

我设法让你的小提琴工作：

http://jsfiddle.net/y94nr/3/

相关位是：

$(document).ready(function(){
    var hideOnClick = function() {
        $('body').live('click.momethingUnique', function(e) {
            var target = $(e.target);
            if(target.closest('.hidden').length) {
                return;
            }
            $('.hidden').slideUp();
            $('body').die('click.momethingUnique');
        });
    };

    $('.click-me').click(function(e){
        if($(".hidden").is(":hidden")) {
            $('.hidden').slideDown();
            hideOnClick();
            return false;    
        }
    });

});

这会处理菜单以外的任何内容。请注意，我使用了live / die而不是on / off，因为小提琴使用了jQuery 1.6.1。如果您使用的是更高版本，请替换为on / off。

当我在框外点击而不是在链接上隐藏框时，如何隐藏这个黑盒子？

3 个答案: