Jquery的父元素和子元素隐藏在mouseout上

Question

我遇到了一个问题，父列表元素与子元素一起隐藏，当我只希望子元素隐藏在mouseout上时。下面是我的代码，任何帮助都非常感谢!

$(document).ready(function(){
    $('#home').hover(
        function() {
            $(this).children().stop().show();
        },
        function() {
            $(this).children().stop().hide();
        }
    );
});

Answer 1

我想我可能知道问题是什么(有列表标记会有帮助)。

你隐藏了父列表元素的所有子元素，这将"隐藏"父元素，因为它没有什么可显示的:

<div>
    <ul id="home">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>
$(document).ready(function(){
    $('#home').hover(
        function() {
            $(this).children().stop().show();
        },
        function() {
            $(this).children().stop().hide();
            console.log(this);
        }
    );
});

http://jsfiddle.net/sK36C/2/

使用Chrome控制台或Firebug在Firefox中查看该元素隐藏后的HTML选项卡，您会注意到UL#home的每个LI都是display: none。在UL中没有什么要显示的，所以看起来已经消失了。

这里是另一个演示，我告诉它跳过:first子元素并隐藏其余部分:

<div>
    <ul id="home">
        <li>This is #home text</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>
$(document).ready(function(){
    $('#home').hover(
        function() {
            $(this).children(':not(:first)').stop().show();
        },
        function() {
            $(this).children(':not(:first)').stop().hide();
            console.log(this);
        }
    );
});

http://jsfiddle.net/sK36C/3/

注意第一个元素没有被隐藏，UL#home仍然是可见的。

见:http://api.jquery.com/children/

Answer 2

最好使用简单的CSS:

HTML:

<div>
    <ul id="home"><p>MENU</p>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>  
</div>

CSS:

#home:hover li{
    display: block;
}
#home li {
 display: none;
}

Fiddle1

Incase如果你想尝试使用jQuery

当你使用jQuery时，试着使用。toggle()

$(document).ready(function(){
    $('#home p').hover(
        function(e) {
            $(this).parent().children(':not(:first)').toggle();
           ;
        }
    );
});

Fiddle2