0

我有这个 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 中。我想当悬停在父 li 内部的查找 div 中并显示它时，我尝试在 jquery 中但是当悬停在标签中显示两个子菜单 div 时，我希望在 test1 中悬停时显示具有 1 的 div.sub-menu， 2,3,4 和当鼠标悬停在 test4 显示具有 a,b,c,d 的 div.sub-menu

4

4 回答 4

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

这个片段安装了显示和隐藏子菜单的委托事件处理程序——注意“隐藏”触发器与“显示”触发器不同，因为我们不希望菜单在鼠标指针离开时立即消失锚。看到它在行动。

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

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

看到它在行动。

这两个版本的结构都使得它们也适用于嵌套的子菜单。

于 2013-10-10T09:14:41.373 回答
0

只需隐藏/显示sub-menuon mouseover/ mouseout：

Javascript

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

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

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

于 2013-10-10T09:13:52.450 回答
0

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

如果你改变 css 那么它是可行的。

像这样写你的CSS。

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

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

于 2013-10-10T09:20:02.717 回答
0

试试这个幻灯片效果，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*/
   });
});
于 2013-10-10T09:24:47.783 回答