Jquery切换不关闭第二次单击
Jquery切换不关闭第二次单击
提问于 2021-10-29 11:51:33
我有超级菜单谁需要显示和隐藏3层子菜单。
当我使用jquery toggle时，它可以很好地打开和隐藏第二个子菜单(第二列)，但是当我使用相同的代码打开和隐藏第三个子菜单(第三列)时，它就打开了，但从不隐藏。
有人知道问题出在哪里吗？
我想要：
单击选项1 =>显示选项1.1
单击选项1.1 =>显示选项1.1.1
第二次单击选项1 =>隐藏选项1.1和选项1.1.1
第二次单击选项1.1 =>隐藏选项1.1.1
html代码：
<div>
<!-- FIRST COLUMN -->
<div>
<a class="first-link" href="#">option 1</a>
<a class="second-link" href="#">option 2</a>
</div>
<!-- SECOND COLUMN -->
<div class="submenu-1 option" style="display:none;">
<div>
<a class="submenu-first-element" href="#">option 1.1</a>
</div>
<div>
<a class="submenu-second-element" href="#">option 1.2</a>
</div>
</div>
<div class="submenu-2 option" style="display:none;">
<div>
<a class="submenu-2-first-element">option 1.1</a>
</div>
</div>
<!-- THIRD COLUMN -->
<div class="first-preview hide-div" style="display:none;">
<a>option 1.1.1</a>
</div>
<div class="second-element hide-div" style="display:none;">
<a>option 1.1.2</a>
</div>
<div class="third-element hide-div" style="display:none;">
<a>option 1.2.1</a>
</div>
</div>jquery代码：
//second column
$('.first-link').on('click', () => {
$('.option').hide();
$('.submenu-1').toggle();
});
$('.second-link').on('click', () => {
$('.option').hide();
$('.submenu-2').toggle();
});
//third column
$('.submenu-first-element').on('click', () => {
$('.hide-div').hide();
$('.first-preview').toggle();
});
$('.submenu-first-element').on('click', () => {
$('.hide-div').hide();
$('.second-element').toggle();
});
$('.submenu-second-element').on('click', () => {
$('.hide-div').hide();
$('.third-element').toggle();
});回答 2
Stack Overflow用户
回答已采纳
发布于 2021-10-29 12:13:55
我想这正是你所期望的。将您的div移动到更接近父服务器的位置，通过单击事件，您可以同时实现这两个目标。
//second column
$('.first-link').on('click', () => {
//$('.option').hide();
$(".submenu-2").hide();
$('.submenu-1').toggle();
});
$('.second-link').on('click', () => {
//$('.option').hide();
$(".submenu-1").hide();
$('.submenu-2').toggle();
});
//third column
$('.submenu-first-element').on('click', () => {
//$('.hide-div').hide();
$('.first-preview').toggle();
$('.second-element').toggle();
});
//on single click it can be done, no need to repeat the function
//$('.submenu-first-element').on('click', () => {
// $('.hide-div').hide();
//});
$('.submenu-second-element').on('click', () => {
//$('.hide-div').hide();
$('.third-element').toggle();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<!-- FIRST COLUMN -->
<div>
<a class="first-link" href="#">option 1</a>
<a class="second-link" href="#">option 2</a>
</div>
<!-- SECOND COLUMN -->
<div class="submenu-1 option" style="display:none;">
<div>
<a class="submenu-first-element" href="#">option 1.1</a>
</div>
<div class="first-preview hide-div" style="display:none;">
<a>option 1.1.1</a>
</div>
<div class="second-element hide-div" style="display:none;">
<a>option 1.1.2</a>
</div>
<div>
<a class="submenu-second-element" href="#">option 1.2</a>
</div>
<div class="third-element hide-div" style="display:none;">
<a>option 1.2.1</a>
</div>
</div>
<div class="submenu-2 option" style="display:none;">
<div>
<a class="submenu-2-first-element">option 1.2</a>
</div>
</div>
<!-- THIRD COLUMN -->
</div>
Stack Overflow用户
发布于 2021-10-29 12:43:33
问题是，在切换之前，您正在隐藏您的选项。举个例子：
$('.first-link').on('click', () => {
$('.option').hide();
$('.submenu-1').toggle();
});First Click
1.1。隐藏类名为option的所有div。
1.2。切换子菜单-1，即显示(因为您隐藏在步骤1.1。
第二次单击
2.1。隐藏类名为option的所有div。
2.2。切换子菜单-1，即显示，再次因为你隐藏在步骤2.1。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69768399
复制相关文章
相似问题
腾讯云开发者
