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/

在Firefox中使用Chrome控制台或Firebug查看该元素隐藏后的HTML标签页，您会注意到LI的{{1}}个UL#home都是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

如果您想尝试使用 jQuery

，请注意

使用jQuery时，请尝试使用.toggle()

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

Fiddle2

在mouseout上使用子元素隐藏Jquery父元素

2 个答案: