Question

在我尝试创建超级菜单时，我坚持使用第三级子菜单。不显示第一个子菜单（li ul）（显示：无）。然后我有jquery脚本，显示悬停的子菜单（li ul - 第一级）。如果窗口小于768px，则激活单击功能（对于触摸屏）。

我的问题是，当我想要设置第三级子菜单（子菜单的子菜单 - li - ul - li - ul）时，不应用任何样式 - 我希望它始终显示，但是隐藏，显示：无应用于该UL，但我将其设为显示：块。所以它只在我悬停其LI元素时显示（li ul li hover）。

所以基本上我试图做的是第一个子菜单（li - ul）在悬停时激活（或点击手机），但第二个子菜单（子菜单的子菜单）总是可见的。当我尝试设计它时我会像这样访问它：li ul li ul，那是行不通的。我该如何访问它？此外，当我尝试悬停该第三级子菜单时，菜单关闭，我没有在jquery中指定它。

HTML

<div class="menu-container">
        <ul class="menu">
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Ovo je nesto</a>
                        <ul>
                            <li><a href="#">aaa</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Ovo je nesto</a></li>
                    <li><a href="#">Ovo je nesto</a></li>
                    <li><a href="#">Ovo je nesto</a></li>
                </ul>
            </li>
            <li><a href="#">Who are we?</a>
                <ul>
                    <li>This is mega menu</li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
        </ul>
    </div>

CSS

.menu-container {
  width: 80%;
  margin: 0 auto;
  background: #333;
}
.menu {
  margin: 0 auto;
  list-style: none;
  padding: 0;
  position: relative;
}
.menu:before,
.menu:after {
  content: "";
  display: table;
}
.menu:after {
  clear: both;
}
.menu li {
  float: left;
  background: #e9e9e9;
  padding: 0;
  margin: 0;
}
.menu li a {
  text-decoration: none;
  padding: 1.5em 3em;
  display: inline-block;
  outline: 0 none;
}
.menu li ul {
  display: none;
  width: 100%;
  background: #333;
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
}
.menu li ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}
.menu li ul li a {
  color: #fff;
  padding: .2em 0;
}
.menu li ul li ul {
  display: block;
}
.menu li ul li ul li {
  display: block;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
960px
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
TABLETS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
MOBILE 100%
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 767px) {
  .menu > li {
    float: none;
    width: 100%;
  }
  .menu > li > ul {
    position: relative;
  }
  .menu > li > ul li {
    float: none;
    width: 100%;
  }
}

Jquery的

$(document).ready(function () {
    $(".menu li").hover(function () {
        if ($(window).width() > 767) {
            $('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide();
        }
    });
    $(".menu li").click(function () {
        if ($(window).width() <= 767) {
            $('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide();
        }
    });
});

演示：http://codepen.io/riogrande/pen/ZbaeKa

Answer 1

这些选择器可能针对相同的li元素，第一个非常宽泛并取消以下规则：

.menu li ul {
  display: none;
  width: 100%;
  background: #333;
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
}

.menu li ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}

.menu li ul li ul {
  display: block;
}

.menu li ul li ul li {
  display: block;
}

您可以使用>选择器仅定位直接子项，但我强烈建议您使用类来帮助在不同级别之间分隔样式：

<div class="menu-container">
    <ul class="menu-level1">
        <li><a href="#">Home</a>
            <ul class="menu-level2">
                <li><a href="#">Ovo je nesto</a>
                    <ul class="menu-level3">
                        <li><a href="#">aaa</a></li>
                    </ul>
                </li>
                <li><a href="#">Ovo je nesto</a></li>
                <li><a href="#">Ovo je nesto</a></li>
                <li><a href="#">Ovo je nesto</a></li>
            </ul>
        </li>
        <li><a href="#">Who are we?</a>
            <ul class="menu-level2">
                <li>This is mega menu</li>
            </ul>
        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Answer 2

CSS选择器.menu li ul li ul li将选择第3级子菜单或更低级别的所有列表项。正如sodawillow所提到的，你可以使用类或直接后代选择器>来微调特定子菜单级别的样式。

以下片段将使子菜单悬停效果更加直观 - 通过隐藏所有菜单直到其父级悬停。

JavaScript - 用以下代码替换整个淡入淡出/隐藏语句：

$(this).children("ul").fadeToggle(200);

CSS：

.menu li ul li ul {
  display: none;
}

如果您希望第一个子菜单可见时第二个子菜单可见，则jQuery选择器应为$(".menu > li")而不是仅选择第一个子菜单，并且CSS可以保留原样。

造型第三级菜单不起作用

2 个答案: