后退按钮，如 jquery 中的面包屑
Posted
技术标签:
【中文标题】后退按钮，如 jquery 中的面包屑【英文标题】：Back button like breadcrumbs in jquery 【发布时间】：2022-01-11 08:13:41 【问题描述】：我在左侧显示菜单。到目前为止，菜单没有问题。
现在我正在处理后退按钮。一旦用户点击Demo1 -> Demo 1.1 然后它将显示Demo 1.1.1, Demo 1.1.2 等。所以我打算在顶部显示返回按钮
//back
Demo1->Demo 1.1
//dropdown
Demo 1.1.1
Demo 1.1.2
Demo 1.1.3
Demo 1.1.4
注意：我的菜单是完全动态的，我不想添加静态值。
$('.menu-item-has-children .sub-menu').css(
'left': '-320px'
);
$('.menu-item-has-children > a').click(function()
//alert('hello');
var positionMenu = $(this).parent().attr('id');
//console.log(positionMenu);
$('.menu-item-has-children[id=' + positionMenu + '] > .sub-menu').css(
'left': '0px'
);
var pMenu1 = $(this).text();
console.log(pMenu1);
$('.secondary').prepend(pMenu1);
);ul
padding-left: 0;
.secondary
z-index: 99;
background: #f8f8f8;
-webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
-webkit-transition: left 0.2s ease, width 0.2s ease;
transition: left 0.2s ease, width 0.2s ease;
border-right: 1px solid #eaedf1;
position: fixed;
top: 0;
height: 100%;
padding: 12px;
width: 320px;
.menu li
padding-bottom: 10px;
padding-left: 23px;
list-style: none;
.menu-item-has-children>a
position: relative;
display: block;
.menu-item-has-children .sub-menu
width: 100%;
height: 100%;
padding-top: 40px;
background: #f8f8f8;
list-style: none;
position: absolute;
top: 0;
left: 0;
transition: left .3s;
z-index: 10;
.menu-item-has-children>a::after
display: inline-block;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
position: absolute;
right: 05px;
top: 0px;
font-size: 12px;
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
<div class="secondary">
<ul id="menu-inner-page-menu" class="menu">
<li>Home</li>
<li id="menu-item-204" class="menu-item-has-children"><a href="#">Demo1</a>
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item-has-children"><a href="#">Demo 1.1</a>
<ul class="sub-menu">
<li><a href="">Demo 1.1.1</a></li>
<li><a href="">Demo 1.1.2</a></li>
<li><a href="">Demo 1.1.2</a></li>
</ul>
</li>
<li id="menu-item-305"><a href="">Demo 1.2</a></li>
<li id="menu-item-306"><a href="">Demo 1.3</a></li>
<li id="menu-item-307"><a href="">Demo 1.4</a></li>
</ul>
</li>
<li id="menu-item-205" class="menu-item-has-children"><a href="#">Demo2</a>
<ul class="sub-menu">
<li id="menu-item-315"><a href="">Demo 2.1</a></li>
<li id="menu-item-316"><a href="">Demo 2.2</a></li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>现在我正在控制台中获取输出。
同样获取 html 视图源代码
现在，如何使可点击？
【问题讨论】：
【参考方案1】：您的 HTML。
<div class="secondary">
<div id="menu-breadcrumb"></div>
<ul id="menu-inner-page-menu" class="menu">
<li>Home</li>
<li id="menu-item-204" class="menu-item-has-children"><a href="#">Demo1</a>
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item-has-children"><a href="#">Demo 1.1</a>
<ul class="sub-menu">
<li><a href="">Demo 1.1.1</a></li>
<li><a href="">Demo 1.1.2</a></li>
<li><a href="">Demo 1.1.2</a></li>
</ul>
</li>
<li id="menu-item-305"><a href="">Demo 1.2</a></li>
<li id="menu-item-306"><a href="">Demo 1.3</a></li>
<li id="menu-item-307"><a href="">Demo 1.4</a></li>
</ul>
</li>
<li id="menu-item-205" class="menu-item-has-children"><a href="#">Demo2</a>
<ul class="sub-menu">
<li id="menu-item-315"><a href="">Demo 2.1</a></li>
<li id="menu-item-316"><a href="">Demo 2.2</a></li>
</ul>
</li>
</ul>
</div>
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
CSS
ul
padding-left: 0;
.secondary
z-index: 99;
background: #f8f8f8;
-webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
-webkit-transition: left 0.2s ease, width 0.2s ease;
transition: left 0.2s ease, width 0.2s ease;
border-right: 1px solid #eaedf1;
position: fixed;
top: 0;
height: 100%;
padding: 12px;
width: 320px;
.menu li
padding-bottom: 10px;
padding-left: 23px;
list-style: none;
.menu-item-has-children>a
position: relative;
display: block;
.menu-item-has-children .sub-menu
width: 100%;
height: 100%;
padding-top: 40px;
background: #f8f8f8;
list-style: none;
position: absolute;
top: 0;
left: 0;
transition: left .3s;
z-index: 10;
/* select only first child li that has sub menu to top 40 */
.menu > li.menu-item-has-children > .sub-menu
top: 40px;
.menu-item-has-children>a::after
display: inline-block;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
position: absolute;
right: 05px;
top: 0px;
font-size: 12px;
/* below is style for menu breadcrumb */
.mbc-link-back
color: #0066cc;
text-decoration: none;
#menu-breadcrumb a + a::before
color: #222;
content: '>';
cursor: default;
padding: 0 3px;
javascript (jQuery)
$('.menu-item-has-children .sub-menu').css(
'left': '-320px'
);
var menuBreadcrumb = document.getElementById('menu-breadcrumb');
$('.menu-item-has-children > a').click(function()
//alert('hello');
var thismenuLi = $(this).parent().attr('id');
let thismenuText = $(this).text();
let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="' + thismenuLi + '">' + thismenuText + '</a>'
menuBreadcrumb.insertAdjacentHTML('beforeend', mbcElement);
//console.log(thismenuLi);
$('.menu-item-has-children[id=' + thismenuLi + '] > .sub-menu').css(
'left': '0px'
);
);
// use event delegation to listen click on menu breadcrumb and go back.
$('body').on('click', '.mbc-link-back', function(e)
e.preventDefault();
// in case user click on the item before last, go back all until the end.
$(this).nextAll().each(function(index)
mbcGoBack($(this));
);
mbcGoBack($(this));
);
function mbcGoBack(jQThis)
let menuLiId = jQThis.data('menuItemId');
$('.menu-item-has-children[id=' + menuLiId + '] > .sub-menu').css(
'left': '-320px'// must match from the beginning.
);
jQThis.remove();
我已将您的一个 JS 变量重命名以使其更易于理解，添加 JS 功能，稍微修改 CSS 以仅针对第一个子项的 top 值，为菜单面包屑添加 CSS。
See it in action
【讨论】：
让我看看答案 是的，它正在处理虚拟文本，但我遇到了实际内容的一个问题。我的内容太大了。我打算缩短菜单.. 如果 Demo1->Demo 1.1 这没关系，但如果菜单太大，如 Demo1->Demo 1.1-> Demo1.1.1，那么我必须只显示第一个和最后一个输出，如 Demo1- >....-> Demo1.1.1 让我试试这个。你对此有什么想法吗 不，我不认为很多面包屑项目应该放在这个位置。您应该使用后退按钮来获得更好的 UI/UX 和样式。那些长面包屑应该在顶部的主列中，小字体。 For example 或者您可以使用text truncate，但结果不是您所期望的。将面包屑（单击后）移动到主要内容是最佳选择，因为它可以尽可能多地扩展。以上是关于后退按钮，如 jquery 中的面包屑的主要内容，如果未能解决你的问题，请参考以下文章
从 ASP.NET 切换到面包和黄油 HTML/jQuery 的优势
折叠在导航栏面包屑按钮的 ng-bootstrap 和 Angular 4 应用程序中不起作用