javascript - jQuery:CSS显示块不起作用

我正在尝试制作一个简单的下拉菜单，这是到目前为止的代码：
的HTML

<div id="menuBox">
    <ul>
        <li>
           <a href="" class="activate">item 1</a>
           <ul class="subs" style="display: none;">
            <li>
                <a href="">Sub 1 </a>
                <a href="">Sub 2 </a>
            </li>
          </ul>
        </li>
        <li>
           <a href="" class="activate">item 1</a>
           <ul class="subs" style="display: none;">
            <li>
                <a href="">Sub 1 </a>
                <a href="">Sub 2 </a>
            </li>
           </ul>
        </li>
    </ul>
</div>

JQUERY

jQuery(".activate").hover(function(){
    jQuery(this).find('.subs').css("display", "block");
}, function(){
    jQuery(this).find('.subs').css("display", "none");
});

当我在我的网站上尝试时，什么都没发生，我在做什么错？

最佳答案

您目前没有.activate类的元素，因为HTML混乱了。更改：

<a href="class="activate"">item 1</a>

至：

<a class="activate">item 1</a>

解决此问题后，由于.subs不是.activate的后代，您仍然会遇到问题。您需要使用jQuery's next() method来选择.subs元素：

jQuery(".activate").hover(function(){
    jQuery(this).next('.subs').css("display", "block");
}), function(){
    jQuery(this).next('.subs').css("display", "none");
});

关于javascript - jQuery:CSS显示块不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26401374/