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's next() method来选择.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();
});

DEMO

Answer 3

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

将以上行更正为：

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