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>

塔爾一切OK，但是當我點擊菜單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>