jQuery：CSS显示块不起作用

Question

我正在尝试制作一个简单的下拉菜单，这是到目前为止的代码：
的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");
});

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

Answer 1

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

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

至：

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

一旦你已经修复了，你仍然会有问题.subs不是的后代.activate 。 您将需要使用jQuery的next()方法来选择.subs元素：

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

Answer 2

尝试

的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>

JS

jQuery(".activate").hover(function(){
    jQuery(this).next('.subs').show();
}, function(){
    jQuery(this).next('.subs').hide();
});

演示

Answer 3

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

上面的行更正为：

<p class="activate" style="cursor:pointer;">item 1</p>