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

应该是这样的：

你需要在第二个元素

中添加类别“one”

    <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();
    }) ;

Answer 2

首先，你需要知道下拉列表的结构是如何工作的。阻碍了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()处理程序来执行操作show和hide。像这样：

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

选中 Fiddle Demo

完成jQuery下拉菜单的指导

2 个答案: