2023年2月10日 12:20:06go评论51阅读模式

英文:

One Click on Nav Menu Trigger several actions

问题

我有3个导航菜单，每个菜单都有子菜单。点击菜单或加号/减号时，我需要执行两个操作。

第一个操作：当我点击：

显示这个子菜单
将这个加号变成减号
关闭其他子菜单
将其他子菜单的符号从减号变成加号

第二个操作：当我再次点击已打开子菜单的元素时

子菜单将被关闭
减号变成加号

我的 jQuery 在第一个操作上按预期工作，但不知何故在第二个操作上不起作用。

请帮我一把。谢谢。

$(function(showHidesubMenu) {
    $('.parent-list').click(function() {
      $(this)
        .toggleClass('open').next().toggleClass('icon-minus icon-plus')
        .add($('.parent-list.open').not(this).removeClass('open').next().toggleClass('icon-minus icon-plus'))
        .parent().next('.child-layer').toggleClass('show');
    })
  })

$(function() {
  $('.plus-minus').click(function() {
    $(this)
      .prev().toggleClass('open')
      .next().toggleClass('icon-minus icon-plus')
      .add($('.parent-list.open').not(this).removeClass('open'))
      .parent().next('.child-layer').toggleClass("show");
  })
})

li {
  display: flex;
}
.icon-plus:before {
  content: "95";
}
.icon-minus:before {
  content: "12";
}
.parent-list {
  padding-right: 50px;
  cursor: pointer;
}
.collapse {
  display: none;
}
.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li class="non-active">
    <a class="non-active parent-list" href="#level1">level 1</a>
    <div class="plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class="child-layer collapse">
    <li>Sub Child 1</li>
    <li>Sub Child 1</li>
    <li>Sub Child 1</li>
  </ul>
  <li class="non-active">
    <a class="non-active parent-list" href="#level2">level 2</a>
    <div class="plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class="child-layer collapse">
    <li>Sub Child 2</li>
    <li>Sub Child 2</li>
    <li>Sub Child 2</li>
  </ul>
  <li class="non-active">
    <a class="non-active parent-list" href="#level3">level 3</a>
    <div class="plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class="child-layer collapse">
    <li>Sub Child 3</li>
    <li>Sub Child 3</li>
    <li>Sub Child 3</li>
  </ul>
</ul>

英文:

I have 3 menus in a nav and each menu has a submenu. I need to do 2 acts when clicking on a menu, or plus/minus sign.

First Act: When I click:

show this submenu
change this plus sign to minus sign
Close other submenus
Change other submenus signs from minus to plus

Second Act: When I click on an element which has an open submenu, again

submenu will be closed.
minus sign change to plus sign

My JQuery is working as expected on the First Act, but somehow it doesn't work on the Second Act

Please give me a hand. Thanks

$(function(showHidesubMenu) {
$('.parent-list').click(function() {
$(this)
.toggleClass('open').next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open').next().toggleClass('icon-minus icon-plus'))
.parent().next('.child-layer').toggleClass('show')
})
})

$(function() {
$('.plus-minus').click(function() {
$(this)
.prev().toggleClass('open')
.next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open'))
.parent().next('.child-layer').toggleClass("show");
})
})

li {
  display: flex
}
.icon-plus:before {
  content: &quot;95&quot;;
}
.icon-minus:before {
  content: &quot;12&quot;;
}
.parent-list {
  padding-right: 50px;
  cursor: pointer;
}
.collapse {
  display: none;
}
.show {
  display: block;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;ul&gt;
  &lt;li class=&quot;non-active&quot;&gt;
    &lt;a class=&quot;non-active parent-list&quot; href=&quot;#level1&quot;&gt;level 1&lt;/a&gt;
    &lt;div class=&quot;plus-minus icon-plus&quot;&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/li&gt;
  &lt;ul class=&quot;child-layer collapse&quot;&gt;
     &lt;li&gt;Sub Child 1&lt;/li&gt;
     &lt;li&gt;Sub Child 1&lt;/li&gt;
     &lt;li&gt;Sub Child 1&lt;/li&gt;
 &lt;/ul&gt;
   &lt;li class=&quot;non-active&quot;&gt;
    &lt;a class=&quot;non-active parent-list&quot; href=&quot;#level2&quot;&gt;level 2&lt;/a&gt;
    &lt;div class=&quot;plus-minus icon-plus&quot;&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/li&gt;
  &lt;ul class=&quot;child-layer collapse&quot;&gt;
     &lt;li&gt;Sub Child 2&lt;/li&gt;
     &lt;li&gt;Sub Child 2&lt;/li&gt;
     &lt;li&gt;Sub Child 2&lt;/li&gt;
 &lt;/ul&gt;
   &lt;li class=&quot;non-active&quot;&gt;
    &lt;a class=&quot;non-active parent-list&quot; href=&quot;#level3&quot;&gt;level 3&lt;/a&gt;
    &lt;div class=&quot;plus-minus icon-plus&quot;&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/li&gt;
  &lt;ul class=&quot;child-layer collapse&quot;&gt;
     &lt;li&gt;Sub Child 3&lt;/li&gt;
     &lt;li&gt;Sub Child 3&lt;/li&gt;
     &lt;li&gt;Sub Child 3&lt;/li&gt;
 &lt;/ul&gt;
&lt;/ul&gt;

答案1

得分: 1

这是您提供的HTML、CSS和JavaScript代码的翻译：

<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-js -->
$(function (showHidesubMenu) {
  $('.parent-list').click(function() {
    $(this)
      .toggleClass('opening') // 添加类标记为打开状态
      .next()
      .toggleClass('icon-minus icon-plus')
      .add(
        $('.parent-list.opening')
          .not(this)
          .removeClass('opening')
          .next()
          .toggleClass('icon-minus icon-plus')
      )
      // 切换父元素的ul
      .parent()
      .next('.child-layer')
      .toggleClass('show')
  })
})

<!-- 语言: lang-css -->
li {
  display: flex;
}
.icon-plus:before {
  content: "\2795";
}
.icon-minus:before {
  content: "\2212";
}
.parent-list {
  padding-right: 50px;
  cursor: pointer;
}
.collapse {
  display: none;
}
.show {
  display: block;
}

<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li class="non-active">
    <a class="non-active parent-list" href="#level1">级别1</a>
    <div class="plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class="child-layer collapse">
    <li>子级 1</li>
    <li>子级 1</li>
    <li>子级 1</li>
  </ul>
  <li class="non-active">
    <a class "non-active parent-list" href="#level2">级别2</a>
    <div class="plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class="child-layer collapse">
    <li>子级 2</li>
    <li>子级 2</li>
    <li>子级 2</li>
  </ul>
  <li class="non-active">
    <a class="non-active parent-list" href="#level3">级别3</a>
    <div class="plus-minus icon-plus">&nbsp;</div>
  </li>
  <ul class="child-layer collapse">
    <li>子级 3</li>
    <li>子级 3</li>
    <li>子级 3</li>
  </ul>
</ul>

<!-- 结束代码片段 -->

请注意，我已将代码中的 "level" 和 "Sub Child" 等文本翻译成中文。

英文:

$(function(showHidesubMenu) {
$(&#39;.parent-list&#39;).click(function() {
$(this)
.toggleClass(&#39;opening&#39;) // add class mark this opening
.next()
.toggleClass(&#39;icon-minus icon-plus&#39;)
.add(
$(&#39;.parent-list.opening&#39;)
.not(this)
.removeClass(&#39;opening&#39;)
.next()
.toggleClass(&#39;icon-minus icon-plus&#39;)
)
// to parent toogle ul
.parent()
.next(&#39;.child-layer&#39;)
.toggleClass(&#39;show&#39;)
})
})

li {
  display: flex
}
.icon-plus:before {
  content: &quot;95&quot;;
}
.icon-minus:before {
  content: &quot;12&quot;;
}
.parent-list {
  padding-right: 50px;
  cursor: pointer;
}
.collapse {
  display: none;
}
.show {
  display: block;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;ul&gt;
  &lt;li class=&quot;non-active&quot;&gt;
    &lt;a class=&quot;non-active parent-list&quot; href=&quot;#level1&quot;&gt;level 1&lt;/a&gt;
    &lt;div class=&quot;plus-minus icon-plus&quot;&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/li&gt;
  &lt;ul class=&quot;child-layer collapse&quot;&gt;
     &lt;li&gt;Sub Child 1&lt;/li&gt;
     &lt;li&gt;Sub Child 1&lt;/li&gt;
     &lt;li&gt;Sub Child 1&lt;/li&gt;
 &lt;/ul&gt;
   &lt;li class=&quot;non-active&quot;&gt;
    &lt;a class=&quot;non-active parent-list&quot; href=&quot;#level2&quot;&gt;level 2&lt;/a&gt;
    &lt;div class=&quot;plus-minus icon-plus&quot;&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/li&gt;
  &lt;ul class=&quot;child-layer collapse&quot;&gt;
     &lt;li&gt;Sub Child 2&lt;/li&gt;
     &lt;li&gt;Sub Child 2&lt;/li&gt;
     &lt;li&gt;Sub Child 2&lt;/li&gt;
 &lt;/ul&gt;
   &lt;li class=&quot;non-active&quot;&gt;
    &lt;a class=&quot;non-active parent-list&quot; href=&quot;#level3&quot;&gt;level 3&lt;/a&gt;
    &lt;div class=&quot;plus-minus icon-plus&quot;&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/li&gt;
  &lt;ul class=&quot;child-layer collapse&quot;&gt;
     &lt;li&gt;Sub Child 3&lt;/li&gt;
     &lt;li&gt;Sub Child 3&lt;/li&gt;
     &lt;li&gt;Sub Child 3&lt;/li&gt;
 &lt;/ul&gt;
&lt;/ul&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

点击导航菜单一次触发多个操作

问题

答案1

父级不是 flex，但子级似乎是 flex。

How does setting parent position to relative and child position to absolute affect div centering with translate?

如何在单选按钮选中时更改标签边框颜色？

如何使两组复选框相互排斥

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论