Question

此菜单替换父菜单项。如果按下菜单按钮，帮助获得原始状态。尝试$（'。navbar-dropdown）.next（'。navbar-dropdown-menu：first-child'）。clone（），但点击按钮时不能替换。

$(function () {
$(document).on("click",  function (e) {
  var target = $(e.target);
  
  if (!(target).is('.navbar-dropdown-menu')) {
    $('.navbar-dropdown-content').hide();
  }
});
  
$('.navbar-dropdown-menu').on("click", function (e) {
  e.stopPropagation();
  e.preventDefault();
  $(this).parent('.navbar-dropdown-content').replaceWith($(this).next('.navbar-dropdown-content').toggle());
	
  });
});

.navbar-dropdown-content {
  display: none;
  position: absolute;
  background: gray;
}
.navbar-dropdown-content a {
  display: block;
  padding: .5em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navbar-dropdown">
	<button class="navbar-dropdown-menu" type="button">Menu</button>
	<div class="navbar-dropdown-content">
      <a href="#" class="navbar-dropdown-menu">1 item</a>
        <div class="navbar-dropdown-content">
          <a href="#" class="navbar-dropdown-menu">1.1 item</a>
            <div class="navbar-dropdown-content">
              <a href="#" class="navbar-dropdown-menu">1.1.1 item</a>
              <a href="#" class="navbar-dropdown-menu">1.1.2 item</a>
              <a href="#" class="navbar-dropdown-menu">1.1.3 item</a>
            </div>
          <a href="#" class="navbar-dropdown-menu">1.2 item</a>
        </div>
      <a href="#" class="navbar-dropdown-menu">2 item</a>
        <div class="navbar-dropdown-content">
          <a href="#" class="navbar-dropdown-menu">2.1 item</a>
          <a href="#" class="navbar-dropdown-menu">2.2 item</a>
          <a href="#" class="navbar-dropdown-menu">2.3 item</a>
        </div>
    </div>
</div>

Answer 1

我会在原始状态存储的HTML中添加hidden input，并从那里读取并重复使用。或者，您可以将原始状态作为JSON值传递给Javascript代码。

多级下拉菜单。如何获得原始状态？

1 个答案: