Question

我有这个HTML代码

<ul>
        <li><a href="#">test1</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a>
            <div class="sub-menu">
                <ul>
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li><a href="#">d</a></li>
                </ul>
            </div>
        </li>
    </ul>

div.sub-menu隐藏在css中。我想把它悬停在父李的里面找到div并显示它，我在jquery中尝试但是当悬停在标签中时显示两个子菜单div，我想在悬停在test1中时显示div.sub-menu有1,2,3,4 当在test4中悬停时显示div.sub-menu，其中包含a，b，c，d

Answer 1

您可以为操作相关子菜单的mouseenter和mouseleave事件附加处理程序，例如：

$(document)
   .on("mouseenter", "ul > li > a", function() {
      $(this).siblings(".sub-menu").show();
   })
   .on("mouseleave", "ul > li", function() {
     $(this).children("a").next(".sub-menu").hide();
   });

此代码段安装显示和隐藏子菜单的委托事件处理程序 - 请注意“隐藏”触发器与“显示”触发器不同，因为我们不希望菜单在鼠标指针消失后立即消失离开锚点。的 See it in action

但是，根据所需的结果，您也可以使用纯CSS执行此操作，例如

ul > li > a + .sub-menu { display: none } ul > li:hover > a + .sub-menu { display: inline-block }

<强> See it in action

两个版本都是结构化的，因此它们也适用于嵌套子菜单。

Answer 2

只需隐藏/显示sub-menu / mouseover上的mouseout：

<强>的Javascript

$("li").mouseover(function(){
    $("ul", this).show();
});

$("li").mouseout(function(){
    $("ul", this).hide();
});

JS小提琴： http://jsfiddle.net/EDufY/

Answer 3

如果你想在li的悬停效果上显示菜单，那么我认为你不需要javascript。

如果你改变了css那么它就是可能的。

写你的css就像。

  .sub-menu
  {
    display:none;
  }
  li:hover .sub-menu
  {
     display:block
  }

你有多级菜单然后给他们id并重复上面的程序

Answer 4

使用幻灯片效果http://jsfiddle.net/SmtQf/1/

尝试此操作

$(function () {
   $('ul li').hover(
      function () {
          $('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
      }, function () {
          $('.sub-menu', this).stop(true, true).slideUp();  /*slideUp the subitems on mouseout*/
   });
});

如何使用jquery在li里面找到div

4 个答案: