javascript 多次点击 显示隐藏

Question

我有用户代码来显示/隐藏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>

一切都好，但是当我单击菜单 1(不是关闭菜单 1)并单击菜单 2 时，菜单 2 会显示(打开)。

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

任何想法都可以帮助我。感谢您的支持

Answer 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>