Question

我想创建一个类似http://www.macheesmo.com/（食谱）的菜单，其中显示所有链接（3级深）。

我的问题是每次离开第3个ul时，整个子菜单都会消失。

另一个问题是，当我进入第二个ul然后回到第一个ul，第三个ul消失。

另一个问题是选择器，除非我删除a。

，否则它不起作用

我想要包含a的原因是为悬停/跟踪设置了“on”样式。

$(function () {
    $(".main-nav ol li a").hover(function () {
        $(this).addClass("hover");
        $('ul', this).css({
            'visibility': 'visible'
        });
    }, function () {
        $(this).removeClass("hover");
        $('ul', this).css({
            'visibility': 'hidden'
        });
    });
});

任何帮助将不胜感激，谢谢！

Answer 1

你在jsfiddle做的事情带来了一些错误我将尝试与你一对一地解决它

首先，您需要在代码中包含jquery文件。用jquery帮助编写一些代码。要包含jquery文件，你可以使用jquery的本地文件和这段代码

<script src="local/jquery.min.js" />

您需要使子菜单的位置绝对。并且李持有他的位置：亲戚。是让子与父亲相关，而左上角的值将你的子菜单放在你想要的真实位置。
有一些问题需要使用。对于子菜单的jquery给你，例如show（）和hide（）选项。在此代码中，您可以看到执行工作的简短代码

$(function () {
    $(".main-nav ol li a").hover(function () {
        $(this).addClass("hover");
        $(this).next('ul').show();
    }, function () {
        $(this).removeClass("hover");
        $(this).next('ul').hide();
    });
});

你可以尝试用fadeOut（）和fadeIn（）替换show（）和hide（）来进行一些转换。

很乐意提供帮助

Answer 2

正如评论中所指出的，这样做的方法是将javascript从中删除，只使用CSS（就像你试图复制的示例网站一样）。

基本上，您有三个嵌套列表，级别1-3，默认情况下只有级别1可见。这是风格如何运作的玩具示例：

HTML：

<ul id="menu">
  <li>
    <a href="#">Item 1</a>
    <ul>
      <li>
        Sub item1
        <ul>
          <li>Third level items go here</li>
        </ul>
      </li>
      <li>Sub item without third level items..</li>
    </ul>
  </li>
  <li><a href="#">Item 2, no submenu</a></li>
</ul>

CSS：

/* Hide the submenu by default */
#menu > li > ul {
  display:none;
}

/* Show on parent hover */
#menu > li:hover > ul {
  display:block;
}

现在这是非常基本的HTML / CSS，只显示本练习的show hide部分，但其余部分与问题无关。

如果您出于某种原因真的想要使用jQuery，您可以删除上面的第二个样式规则并使用此脚本来获得相同的效果：

$(document).ready(function(){
  $('#menu > li').hover(function(){
    $(this).children('ul').show();
  }, function(){
    $(this).children('ul').hide();
  });
});

jQuery下拉菜单显示所有链接

2 个答案: