javascript多点显示隐藏

Question

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

＆＃13;

＆＃13;

$('.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');
});

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Thal一切都好，但是当我点击菜单1（不是关闭菜单1）并点击菜单2是双2菜单显示（打开。）

如何点击菜单1 =＆gt;菜单2（打开）关闭。或点击菜单2 =＆gt;菜单1（打开）关闭。

任何想法让我感到高兴。感谢您的支持

Answer 1

只要点击页面上其他菜单内容的菜单，就可以使用jQuery slideUp功能。

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

＆＃13;

＆＃13;

$('.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');
});

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;