后退按钮，如 jquery 中的面包屑

Question

我在左侧显示菜单。到目前为止，菜单没有问题。 现在我正在处理后退按钮。一旦用户点击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 视图源代码

现在，如何使可点击？

Answer 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