2

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

到目前为止，这是我想出的 - http://jsfiddle.net/MZxeA/

我的问题是每次我离开第三个 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'
        });
    });
});

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

4

2 回答 2

0

您在 jsfiddle 中所做的事情有一些错误，我将尝试与您一一修复

  1. 首先，您需要在代码中包含 jquery 文件。用 jquery 帮助编写一些代码。要包含 jquery 文件，您可以使用 jquery 的本地文件和此代码
<script src="local/jquery.min.js" />

  1. 您需要将子菜单的位置设为绝对位置。而李持有他的位置：相对。是使与他父亲相关的子和顶部和左侧的值将您的子菜单放在您想要的真实位置。

  2. 在可见选项中有一些问题需要使用。对于子菜单的 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();
    });
});

如果您愿意，也可以尝试将 show() 和 hide() 替换为 fadeOut() 和 fadeIn() 以进行一些过渡。

乐于助人

于 2013-02-05T08:53:13.107 回答
0

正如评论中指出的那样，这样做的方法是将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，仅显示本练习的显示隐藏部分，但其余部分与问题无关。

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

$(document).ready(function(){
  $('#menu > li').hover(function(){
    $(this).children('ul').show();
  }, function(){
    $(this).children('ul').hide();
  });
});
于 2013-02-05T09:13:19.860 回答