创建带有扩展汉堡级别的按钮的多级汉堡菜单

Question

我想创建一个动画汉堡菜单，其中的按钮可扩展到下一个级别。 我知道我的代码与之相距甚远，但是我完全陷入了问题。而且无论如何都会向您显示我的进度。 https://jsfiddle.net/TheBB23/hnsjym9u/

我从一个网站复制了此代码，以使您清楚了解我想要的内容。 https://jsfiddle.net/TheBB23/uw2jzge1/

正如我所说，我完全陷入困境，将不胜感激。

object

$('.circle-plus').on('click', function() {
  $(this).toggleClass('opened');
})

var coll = document.getElementsByClassName("hamburger");

var hideLinks = document.querySelectorAll('.mobilemenuitems a');

var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var mobilemenuitems = this.nextElementSibling;
    if (mobilemenuitems.style.display === "block") {
      mobilemenuitems.style.display = "none";
    } else {
      mobilemenuitems.style.display = "block";
    }
  });
}


var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
  // Toggle class "is-active"
  hamburger.classList.toggle("is-active");
  header.classList.toggle("header--is-active");
  // Do something else, like open/close menu
});

document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";

document.getElementsByClassName("mobilemenuspace")[0].addEventListener("click", function() {
	this.style.display = "none";
  hamburger.classList.toggle("is-active");
});

body {
  margin: 0px;
  padding: 0px;
  background: white;
  color: #24603c;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
}

section {
  height: 50px;
  width: 100%;
}

/* Responsive (Smartphone) Menu */
@media (max-width: 1000px) {

  /* Bild oben links Style */
  .logo img {
    height: 50px;
    position: fixed;
    float: left;
    z-index: 3;
  }

  .login-container {
    display: none;
  }

  .LogoutArea {
    display: none;
  }


  #nav {
    display: none;
  }

  /* Platzhalter Menü*/
  section {
    height: 50px;
    width: 100%;
    background: rgba(237, 237, 237, 1);
    background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 237, 237, 1)), color-stop(53%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
  }

  .nav {
    height: 50px;
    width: 100%;
    background: #24603c;
    position: fixed;
    z-index: 2;
  }


  #BurgerSpace>div>button {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 3;
    background: none;
  }

  #BurgerSpace {
    position: relative !important;
  }

  #BurgerSpace>div {
    position: relative !important;
  }

  #BurgerSpace>div>div {
    display: block;
    margin-top: 50px;
  }

  #BurgerSpace {
    width: 100%;
    height: 50px;
    display: block;
    position: absolute;
    float: right;
    margin-right: 0;
    padding-right: 0px;
    padding-top: -2px;
  }
}

.mobilemenuspace {
  display: none;
  width: 100%;
  position: relative;
  z-index: 1;
  right: 0;
  margin-top: 50px;
  background: white;
}

@media (min-width: 1000px) {
  .mobilemenuspace {
    display: none !important;
  }
}

#mobilemenufirstorder>a {
  text-decoration: none !important;
  font-weight: bold;
  list-style: none !important;
  font-size: 28px;
  line-height: 28px;
  height: 100%;
  display: block;
  height: 28px;
  padding-top: 26px;
  padding-bottom: 26px;
  padding-left: 25px;
}

#mobilemenufirstorder>a:hover {
  color: lightgrey !important;
}

#mobilemenufirstorder>a:hover+div {
  display: block !important;
}

#mobilemenufirstorder {
  height: 80px;
  width: 100%;
  border-bottom: solid 2px lightgrey;
  border-top: solid 2px lightgrey;
  list-style: none !important;
  text-decoration: none !important;
}

.mobilemenuitems>li {
  list-style: none;
  text-decoration: none;
}

.mobilemenuitems {
  display: block;
}


.mobilemenusecondorder {
  display: none;
}










.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
  opacity: 1;
}

.opened {
  opacity: 1;
}

.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
  opacity: 0;
}

.circle-plus {
  height: 4em;
  width: 4em;
  font-size: 1em;
  opacity: 0.7;
}

.circle-plus .circle {
  position: relative;
  width: 2.55em;
  height: 2.5em;
}

.circle-plus .circle .horizontal {
  position: absolute;
  background-color: red;
  width: 30px;
  height: 5px;
  left: 50%;
  margin-left: -15px;
  top: 50%;
  margin-top: -2.5px;
}

.circle-plus .circle .vertical {
  position: absolute;
  background-color: red;
  width: 5px;
  height: 30px;
  left: 50%;
  margin-left: -2.5px;
  top: 50%;
  margin-top: -15px;
}


.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover .hamburger-inner::after {
  background: lightgrey;
}

.hamburger:hover .hamburger-inner::before {
  background: lightgrey;
}

.hamburger:hover .hamburger-inner {
  background: lightgrey;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.header--is-active {
  display: flex;
}

Answer 1

这是一个基本示例，您可以从此示例开始并进行改进。

$(function () {
        var $menu = $('.menu');
        var $menuItems = $menu.find('.menu-item');

        for (var i = 0; i < $menuItems.length; i++) {
            var $menuItem = $menuItems.eq(i);
            if ($menuItem.children('.children').length > 0) {

                var $expandCollapseButton = $menuItem.children('.children').hasClass('hidden')?$('<i class="fa fa-plus-square-o"></i>'):$('<i class="fa fa-minus-square-o"></i>');

                $expandCollapseButton.insertAfter($menuItem.find('> a')).on('click', expandCollapse);
            }
        }
    })

    function expandCollapse(e) {
        var $expandCollapseButton = $(this)
        var $children = $expandCollapseButton.siblings('.children');

        if($children.hasClass('hidden')){
            $expandCollapseButton.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
        }else {
            $expandCollapseButton.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
        }

        $children.toggleClass('hidden');
    }

a {
  text-decoration: none;
}

body {
  font-family: 'Ubuntu', sans-serif;
}

.menu-item {
  margin-bottom: 10px;
  min-width: 150px;
}

.menu-item>i {
  margin-left: 5px;
  cursor: pointer;
}

.menu-item>i:hover {
  color: crimson;
}

.child-item {
  margin-left: 20px;
}

.children {
  height: 80px;
  overflow: hidden;
  transition: height .4s;
}

.children.hidden {
  height: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
  <div class="menu-item">
    <a href="#">Item 1</a>
    <div class="children">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 1</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 1</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 1</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 2</a>
    <div class="children hidden">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 2</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 2</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 2</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 3</a>
    <div class="children">
      <div class="child-item menu-item">
        <a href="#">Child 1 of Item 3</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 2 of Item 3</a>
      </div>
      <div class="child-item menu-item">
        <a href="#">Child 3 of Item 3</a>
      </div>
    </div>
  </div>
  <div class="menu-item">
    <a href="#">Item 4</a>
  </div>
  <div class="menu-item">
    <a href="#">Item 5</a>
  </div>
</div>