javascript多次点击显示隐藏

javascript multi click show hide

本文关键字：显示 隐藏 javascript      更新时间：2023-09-26

我有显示/隐藏meu 的用户代码

$('.dcd_menu').click(function(e){
e.preventDefault();
$('.dcdt_menu').slideToggle();
$(this).toggleClass('open');
});
$('.dcd_menu1').click(function(e){
e.preventDefault();
$('.dcdt_menu1').slideToggle();
$(this).toggleClass('open');
});
.dcd_menu { display: block; position: fixed; top: 0; right: 0; z-index: 9999}
.dcd_menu:hover { cursor: pointer; }
.dcd_menu.open {background: red}
.dcd_menu1 { display: block; position: fixed; top: 0; left: 0; z-index: 9999}
.dcd_menu1:hover { cursor: pointer; }
.dcd_menu1.open {background: red}
.dcdt_menu {background: green; display: none;} .dcdt_menu1 {background: red; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="dcd_menu" href="#">
Menu
</a>
<div class="dcdt_menu">
  Click show menu
</div>
<a class="dcd_menu1" href="#">
Menu 1
</a>
<div class="dcdt_menu1">
  Click show menu 1
</div>

Thal all ok，but when i click menu 1(not close menu 1(and click menu 2 is double 2 menu is show(open(

如何单击菜单1=>菜单2(打开(关闭。或单击菜单2=>菜单1(打开(关闭。

有什么想法吗？谢谢你对的支持

每当单击菜单以查看页面上的其他菜单内容时，都可以使用jQuery slideUp函数。

这将使菜单内容向上滑动，使其看起来像是在隐藏。

$('.dcd_menu').click(function(e){
e.preventDefault();
$(".dcdt_menu1").slideUp().prev().removeClass("open");
$('.dcdt_menu').slideToggle();
$(this).toggleClass('open');
});
$('.dcd_menu1').click(function(e){
e.preventDefault();
$(".dcdt_menu").slideUp().prev().removeClass("open");
$('.dcdt_menu1').slideToggle();
$(this).toggleClass('open');
});
.dcd_menu { display: block; position: fixed; top: 0; right: 0; z-index: 9999}
.dcd_menu:hover { cursor: pointer; }
.dcd_menu.open {background: red}
.dcd_menu1 { display: block; position: fixed; top: 0; left: 0; z-index: 9999}
.dcd_menu1:hover { cursor: pointer; }
.dcd_menu1.open {background: red}
.dcdt_menu, .dcdt_menu1 {background: green; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="dcd_menu" href="#">
Menu
</a>
<div class="dcdt_menu">
  Click show menu
</div>
<a class="dcd_menu1" href="#">
Menu 1
</a>
<div class="dcdt_menu1">
  Click show menu 1
</div>

相关文章：