完成 jQuery 下拉菜单的指导

Question

我正在尝试创建一个下拉菜单，但我被困在第一步（我正在学习 jquery）。现在我想要的是，每当我将鼠标悬停在“支持”菜单项上时，应该出现“下拉菜单项 1”，并且当我悬停（下拉菜单项 1）时，“下拉菜单项 2”应该出现在水平放置在“下拉菜单项 1”旁边的框。

我提供了这个小提琴：http://jsfiddle.net/pyrot/84eWr/

有人可以帮我解决这个问题吗？我非常感谢任何帮助。

这里是html：

<ul>
<li class="support">support</li>
<li class="support-drop hide">drop menu item 1</li>
<li class="support-drop two hide">drop menu item 2</li>
</ul>

这是我正在努力解决的代码：

$(document).ready(function () {

        $(".support").hover(function() {
            $(".support-drop").addClass("support-drop.hide");
        }, function() {
            $(".support-drop").removeClass("support-drop.hide");

        });

)}

这里是css：

ul {color: #000000;}

.support-drop.hide { display: none ;}

.support-drop {
    background-color: #000000;
    color:#ffffff;
    width: 200px;
    height: 100px;
 }

.support-drop.two {
    background-color: #5C5C5C;
    color:#ffffff;
    width: 200px;
    height: 100px;
 }

Answer 1

首先，您需要了解下拉菜单的结构是如何工作的。与ul 和li 标记相冲突。您可以在其中获得每个级别信息的 ul 并将其保存在 li 项目中，如下所示：

<ul>
  <li class="support">support
    <ul>
       <li class="support-drop hide">drop menu item 1
         <ul>
           <li class="support-drop two hide">drop menu item 2</li>
         </ul>
       </li>
    </ul>
  </li>
</ul>

现在有了这种结构，您就可以按照正确的方式工作了。首先需要正确的 CSS 属性，例如 display:none 来隐藏子菜单和 position:absolute 以获得所需的视觉效果。

您可以只使用 CSS 来完成下拉菜单，但如果您想使用 Jquery 来完成，您需要 hover() 处理程序来执行显示和隐藏操作。像这样：

 $('li').hover(function(){
  $(this).children('ul').slideToggle();
}) 

检查这个Fiddle Demo

Answer 2

应该是这样的：

您需要在第二个元素中添加类说“一”

    <li class="support-drop hide *one*">drop menu item 1</li> //html add class say "one"

    $(".support").hover(function() {
        $(".one").show();  // it already has the class, so no addClass is needed.
    }, function() {
        $(".one").hide(); // removing class will get you not working next time.

    });

/// 再次显示第二个下拉菜单：

    $(".one").hover(function(){
         $('.two').show();
    }, function(){
           $('.two').hide();
    }) ;