Question

我有这个HTML，.subul隐藏了display: none：

<li class="par cat-item cat-item-2">
    <a href="category/environment">
        <span class="category-text">Environment</span>
        <span class="count"><span class="count-hidden">9</span></span>
    </a>
    <ul class="subul">                                
        <li class="cat-item cat-item-40">
            <a href="category/environment/test">
                <span class="category-text">test</span>
                <span class="count">
                    <span class="count-hidden">1</span>
                </span>
            </a>
        </li>
    </ul>                        
</li>

我希望当li.par悬停在其子ul（如果有的话）下滑动时，我似乎无法让它在悬停时触发。这是我试过的：

$('body').on('mouseenter', 'li.par', function() {
    if ($(this).children("ul").length) {
        alert('code');
    }

    $(this).children("ul").slideDown();
    alert('code');
});

编辑css

ul.subul {
    display: none;
}

Answer 1

试试这个：

$('li.par').hover(function(){
    $(this).children('ul.subul').slideDown();
},function(){
    $(this).children('ul.subul').slideUp();
});

Answer 2

请使用此：

$('body').on('mouseenter', 'li.par', function() {
	$(this).find("ul").slideDown();
});
$('body').on('mouseleave', 'li.par', function() {
	$(this).find("ul").slideUp();
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<ul>
<li class="par cat-item cat-item-2">
    <a href="category/environment">
        <span class="category-text">Environment</span>
        <span class="count"><span class="count-hidden">9</span></span>
    </a>
    <ul class="subul" style="display:none">                                
        <li class="cat-item cat-item-40">
            <a href="category/environment/test">
                <span class="category-text">test</span>
                <span class="count"><span class="count-hidden">1</span></span>
            </a>
        </li>
    </ul>                        
</li>
<li class="par cat-item cat-item-2">
    <a href="category/environment">
        <span class="category-text">Environment</span>
        <span class="count"><span class="count-hidden">10</span></span>
    </a>
</li>
</ul>

检测到悬停并滑下儿童ul

2 个答案: