在鼠标移出时关闭具有类（非id）的容器或单击

Question

这是我的HTML

<ul class="actions">
    <li><span class="toggle"></span>
        <ul>
            <li><span class="entypo-eye">View File</span></li>
            <li><span class="entypo-download">Download File</span></li>
            <li><span class="entypo-export">Send File</span></li>
            <li><span class="entypo-circled-info">File Properties</span></li>
            <li><span class="entypo-login">Copy To...</span></li>
            <li><span class="entypo-trash">Delete File</span></li>
        </ul>
    </li>
</ul>

这是我的JS

$('.actions .toggle').click(function(){
    $(this).next('ul').toggle();
});

所以我现在要做的是让容器在mouseout上关闭和/或当有人点击页面的另一部分（任何部分）时 - 我需要显示每个部分的示例（mouseout /点击）。因此，当有问题的容器有ID而不是类时，这样做会容易得多。

但在这种情况下，它不能有ID，因为页面上会有几种这样的容器。有人有什么建议吗？

Answer 1

您可能需要使用find()而不是next()首先需要使用li转到父parent()，因为find会搜索后代元素。您可以了解有关jQuery api here的更多信息。

<强> Live Demo

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

要在点击时隐藏ul，您可以尝试类似

的内容

<强> Live Demo

$('.actions .toggle').click(function(event){  
    event.stopPropagation();
    $(this).parent().find('ul').toggle();

});

$('body').click(function(){
    if(!$(this).hasClass('toggle'))
       $('.toggle').parent().find('ul').hide();
});

Answer 2

尝试使用jquery closest切换父级ul：

$('.actions .toggle').click(function(){
    $(this).closest('ul').toggle();
});

Answer 3

和mouseout ..

你应该使用.mouseout（）。

demo

$('.actions .toggle').mouseover(function(){  
    $(this).parent().find('ul').show();
});

$('.actions .toggle').mouseout(function(){  
    $(this).parent().find('ul').hide();
});

和

other post

Answer 4

<强> HTML

<div class="show_div"> Sort summary <br /> Second Row</div>
<div class="hide_div" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div>

<强> JS

$(function() {
    $(".show_div").mouseover(function() {
        $(this).next().show();
        $(this).hide("slow");
    });

    $(".hide_div").mouseout(function() {
        $(this).prev().show();
        $(this).hide("slow");

    });
});


    http://jsfiddle.net/UG3FZ/