Question

我已经有了这个菜单，我正在努力......

最初，＆＃34; level-2＆＃34;会出现在＆＃34; level-1＆＃34;下面。我已经能够将它移动到第二列，始终坚持顶部。据我所知，它正在发挥作用！

我遇到的问题是添加更多列，因为我至少需要另一个级别，可能是两个级别。

我认为我已经处理了HTML部分（参见第2项 - 第2-1项 - 第2-1-1项），现在的问题是脚本。我尝试复制当前的那个，但是无法让它工作......

任何帮助都将受到高度赞赏。感谢

HTML：

<div class="wrapper">
<ul>
    <li class="level-1"><a href="#">Item 1</a>
        <ul class="level-2">
        <li><a href="#">Item 1-1</a></li>
        <li><a href="#">Item 1-2</a></li>
        </ul>
    </li>
    <li class="level-1"><a href="#">Item 2</a>
        <ul class="level-2">
        <li><a href="#">Item 2-1</a>
            <ul class="level-3">
            <li><a href="#">Item 2-1-1</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li class="level-1"><a href="#">Item 3</a>
        <ul class="level-2">
        <li><a href="#">Item 3-1</a></li>
        <li><a href="#">Item 3-2</a></li>
        <li><a href="#">Item 3-3</a></li>
        </ul>
    </li>
    <li class="level-1"><a href="#">Item 4</a>
        <ul class="level-2">
        <li><a href="#">Item 4-1</a></li>
        <li><a href="#">Item 4-2</a></li>
        </ul>
    </li>
    </ul>
</div>

JS：

$('.level-2').hide();
  $('.level-1').on('click', function(){
    if(!($(this).children('.level-2').is(':visible'))){
      $('.level-2').slideUp();
      $(this).children('.level-2').slideDown();
    } else {
    $('.level-2').slideUp();
  }
});
$('.level-2').on('click', function(e){
  e.stopPropagation();
});

CSS：

body{
    margin: 0px;
    border: 0;
    overflow: hidden;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #000000;
}

ul li {
    position: relative;
}

li ul {
    position: absolute;
    left: 120px;
    top: 0;
    display: none;
}

ul li a {
    text-decoration: none;
    color: #000000;
}

.level-1 {
    position: relative;
    top: 20px;
    left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.level-2 {
    position: fixed;
    top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

.level-3 {
    position: fixed;
    top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

Answer 1

我已经更新了CSS，请试试这个。它会对你有所帮助。

body{
	margin: 0px;
	border: 0;
  overflow: hidden;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #000000;
}

ul li {
	position: relative;
}

li ul {
	position: absolute;
	left: 120px;
	top: 0px;
	display: none;
}

ul li a {
	text-decoration: none;
	color: #000000;
}

.level-1 {
	position: relative;
	top: 20px;
	left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 15px;
	letter-spacing: 0em;
	text-transform: uppercase;
    background:#f5f5f5;
    width:220px;
}

.level-2, .level-3 {
	top: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 15px;
	letter-spacing: 0em;
	text-transform: uppercase;
}

.level-1 > .level-2, .level-1 .level-2 > .level-3{position:absolute; right:10px; top:0px; left:220px; width:220px; background:#f8f8f8;}

由于

Answer 2

通过你的小提琴，我可以看到两个问题：

您正在检查JS中的:visible，但您的CSS正在display:none规则上设置li ul
当可见时，第三级菜单将出现在第二级下面（这更像是一个UX /设计问题而不是JS的问题）

第二个问题可以通过一些CSS轻松解决，例如：

.level-3 { left: 200px; }

我认为，第一个问题是因为你在CSS中使用'display'设置了一个隐藏元素，但试图在JS中检查:visible而不是display的值。 1}}规则。 This stackoverflow answer explains why this can cause problems可能比我更好，但我认为问题是JS无法使用CSS找到设置为display:none的对象。

我已created a fiddle which gives an example了解如何通过在JS中替换此行来避免此问题：

if(!($(this).children('.level-2').is(':visible'))){

用这个：

if($('.level-3').css('display') === 'none'){

（我已经离开了点击.level-1的逻辑，但更改了点击.level-2以便于比较的逻辑。）

在我的示例中，我还为不同的列表项添加了彩色背景以帮助实现可见性 - 通过这种方式查看项目是否相互叠加更容易。我希望其中一些有用！

slideDown菜单 - 问题添加更多级别

2 个答案: