Question

我在将第二个孩子添加到下拉菜单时遇到问题。这是我的html代码：

<ul class="sidenav sidenav-fixed" id="nav-mobile">
  <li>
    <a onclick="load('file-name')"><i class="material- 
     icons">home</i>TEXT
    </a>
  </li>
  <div class="divider"></div>
  <li><a onclick="load('file-name')"><i class="material- 
   icons">apps</i>TEXT</a>
  </li>
  <li><a onclick="load('file-name')"><i class="material- 
    icons">copyright</i>Copyright</a>
  </li>
  <li class="button-dropdown">
    <a onclick="load('file-name') class="dropdown-toggle"><i class="material- 
     icons">assignment</i>Unit A<i class="fa fa-angle-right changed"></i> 
     </a>
    <ul class="dropdown-menu" style="display: none;">
      <li>
        <a onclick="load('file-name')">Menu 1</a>
      </li>
    </ul>
    <ul class="dropdown-menu" style="display: none;">
      <li>
        <a onclick="load('file-name')">Menu 2</a>
      </li>
    </ul>
  </li>
</ul>

这是我的js：

jQuery(document).ready(function (e) {
      $(".dropdown-toggle").click(function () {
      $(this).parents(".button-dropdown").children(".dropdown- 
      menu").toggle().parents(".button-dropdown").children(".dropdown- 
      toggle").addClass("active")
      });
    $('.dropdown-toggle').on('click', function () {
    $(this)
      .find('.changed')
      .toggleClass('fa-angle-down')
      .toggleClass('fa-angle-right');
     });
});

以下是用于下拉菜单的样式：

.dropdown-menu li > a {
  text-align: center;
 }

.dropdown-menu li:hover > a {
  background-color: #385170 !important;
  color: #fff !important;
 }

.changed {
 margin-left: 5px;
}

我需要在菜单1和菜单2下添加另一个孩子。非常感谢您的帮助。

Answer 1

我在您的代码中发现的第一个问题是您定义了两次相同的事件，这意味着将仅执行最后一个。

要在事件监听器中使用jQuery附加项目，就像这样简单：

保持代码干净。

代码开头的全局变量：

var buttonDropdown = $(".button-dropdown");

然后单击dropdown-toggle的事件侦听器：

$('.dropdown-toggle').on('click', function () {
   buttonDropdown.append("<li>new item</li>");
});

每次单击button-dropdown时，这都会向dropdown-toggle追加新项目。

这里是一个例子：

var buttonDropdown = $(".button-dropdown");

jQuery(document).ready(function (e) {
   $('.dropdown-toggle').on('click', function (event) {
	  let itemNumber = buttonDropdown.children().length;
	  buttonDropdown.append("<ul><li>Menu "+itemNumber+"</li></ul>");
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidenav sidenav-fixed" id="nav-mobile">
	<li>
		<a onclick="load('file-name')">
			<i class="material- icons">home</i>TEXT 
		</a>
	</li>
	<div class="divider"></div>
	<li>
		<a onclick="load('file-name')">
			<i class="material- icons">apps</i>TEXT
		</a>
	</li>
	<li>
		<a onclick="load('file-name')">
			<i class="material- icons">copyright</i>Copyright
		</a>
	</li>
	<li class="button-dropdown">
		<a onclick="load('file-name')" class="dropdown-toggle">
			<i class="material- icons">assignment</i>Unit A
			<i class="fa fa-angle-right changed"></i>
		</a>
		<ul class="dropdown-menu" style="display: block;">
			<li>
				<a onclick="load('file-name')">Menu 1</a>
			</li>
		</ul>
		<ul class="dropdown-menu" style="display: block;">
			<li>
				<a onclick="load('file-name')">Menu 2</a>
			</li>
		</ul>
	</li>
</ul>

注意： 此示例是根据您提供的上下文制作的。如果仍然不能解决您的整个问题，请随时在此处编辑您的问题并发表评论，以便我可以更新您的问题要求。

而且，您没有为代码提供任何样式，这就是为什么它看起来如此简单的原因。

在下拉菜单中添加第二个孩子

1 个答案:

保持代码干净。