我正在尝试创建一个菜单，用户可以在其中单击并向下钻取。用户可以在后退元素的帮助下钻取回父元素。li带有子元素的元素都带有>，因此用户将知道子元素可用。>独立于父文本li。以下是我到目前为止想出的代码。

$(function() {
$("li ul").hide();
$(".backText").hide();
//$("body > ul > li").each(function () {
//    var kids = $(this).children("ul").length;
//    if (kids > 0) {
//        $('<span class="">SUB</span>').insertAfter($(this).find('a').first());
//    }
//});
var currentChildLevel;
var previousLevel;
var isAChild; //means it belongs to parent li
$("li ul").hide();
$("li > a + ul").prev("a").after('&nbsp;&nbsp;&nbsp;<span class="children"> > </span>');
$("li a").click(function () {
console.log($(this).text());
});

$("span.children").on('click', function() {
//set parent text
var parentText = $(this).prev("a").text();

//hide other li
$("li").hide();
//show clicked as a back button
$(".backText").text(parentText).show();
//show uls under clicked parent
$(this).siblings('ul').slideToggle();
//$(this).parent().show();
//$(this).siblings('li').show();
//console.log(parentText);
//currentChildLevel = $(this).closest("ul");
//console.log($(this).next('ul'));
//this exposes ul elements
//$(this).siblings('ul').first().slideToggle();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
ul {
width: 400px;
}
</style>
</head>
<body>

<div class="backText"></div>
<ul>
<li><a href="#">Coffee</a></li>
<li><a href="#">Tea</a>
<ul>
<li><a href="#">Black tea</a></li>
<li><a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tea9000</a>
<ul>
<li><a href="#">Black tea</a></li>
<li>
<a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tea 777</a>
<ul>
<li><a href="#">Black tea</a></li>
<li>
<a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tea 1122</a>
<ul>
<li><a href="#">Black tea</a></li>
<li>
<a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Milk</a></li>
</ul>
</body>
</html>

我添加了这一行$(this).siblings('ul').slideToggle();该行应该在用户单击>后运行，它应该公开子uls但它不起作用。

任何人都知道如何去做。

您应该仅使用$(this).parent().siblings().find('ul').hide();将子ul隐藏在父级li兄弟姐妹中，而不是隐藏所有li，这会导致li隐藏在您要显示的ul中。

更改此内容

//hide other li
$("li").hide();

对此

$(this).parent().siblings().find('ul').hide();

请参阅下面的演示

$(function() {
$("li ul").hide();
$(".backText").hide();
var currentChildLevel;
var previousLevel;
var isAChild; //means it belongs to parent li
$("li ul").hide();
$("li > a + ul").prev("a")
.after('<i class="fas fa-level-down-alt children"></i>')
.after('<i class="fas fa-level-up-alt parent"></i>');
$("i.children").on('click', function() {
//set parent text
var parentText = $(this).prev("a").text();
//hide other li
$(this).parent().siblings().hide();
//show clicked as a back button
$(".backText").text(parentText).show();
//show uls under clicked parent
$(this).siblings('ul:first').show();
});
$("i.parent").on('click', function() {
var parentUl = $(this).closest('ul');
var backText = $(this).closest('ul').parent('li').find('a:first').text();
if (backText == '') {
//show clicked as a back button
$(".backText").hide();
} else {
//show clicked as a back button
$(".backText").text(backText);
}
parentUl.children().show().find('ul').hide();
});
});

span.children,
span.parent {
color: red;
cursor: pointer;
font-weight: 12px;
}
ul {
width: 400px;
margin: 0;
padding: 0;
}
li ul {
padding-left: 10px;
}
li {
margin: 0;
list-style-type: none;
padding: 10px;
}
.children,
.parent {
padding: 10px;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="backText"></div>
<ul>
<li><a href="#">Coffee</a></li>
<li><a href="#">Tea</a>
<ul>
<li><a href="#">Black tea</a></li>
<li><a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tea9000</a>
<ul>
<li><a href="#">Black tea</a></li>
<li>
<a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tea 777</a>
<ul>
<li><a href="#">Black tea</a></li>
<li>
<a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Tea 1122</a>
<ul>
<li><a href="#">Black tea</a></li>
<li>
<a href="#">Green tea</a>
<ul class="test">
<li><a href="#">Black b</a></li>
<li><a href="#">Black c</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Milk</a></li>
</ul>

`EDIT`

我已经更新了上面的脚本，以便您可以向下钻取并返回到树上，并且在向下钻取时只有当前树可见。希望这能解决问题。

使用"后退"按钮隐藏"显示 li 子元素"

`EDIT`

相关内容

最新更新

热门标签：