简化 JavaScript 单击计数菜单控制 3 个单独的下拉列表

Question

我的页面顶部有 3 个单独的向下滑动菜单。

1. 页面菜单
2. 帐户下拉列表
3. 购物车下拉菜单

我为每个函数创建了单独的打开和关闭函数

function menu_open(){ 
document.getElementById("myNav_overlay").style.height = "100%";
document.getElementById("myNav").style.height = "100%";
$('.menu-link').text("menu_open");
}
function menu_close() {
document.getElementById("myNav_overlay").style.height = "0%";
document.getElementById("myNav").style.height = "0%";
$('.menu-link').text("menu");
}
function account_open(){ 
document.getElementById("myAccount_overlay").style.height = "100%";
document.getElementById("myAccount").style.height = "100%";
$('.account-link').text("person");
}
function account_close() {
document.getElementById("myAccount_overlay").style.height = "0%";
document.getElementById("myAccount").style.height = "0%";
$('.account-link').text("person");
}
function cart_open(){ 
document.getElementById("myCart_overlay").style.height = "100%";
document.getElementById("myCart").style.height = "100%";
$('.cart-link').text("shopping_cart");
}
function cart_close() {
document.getElementById("myCart_overlay").style.height = "0%";
document.getElementById("myCart").style.height = "0%";
$('.cart-link').text("shopping_cart");
}

然后 3 个单独的点击计数功能来确定菜单是否需要打开或关闭。

$(function() {  
var menuclickCount = 0;
var accountclickCount = 0;
var cartclickCount = 0;
$('.menu-link').click(function () {
if(menuclickCount%2==0){
//do when open
menu_open();
account_close();
cart_close();
}else{
//do when closed
menu_close();
}
clickCount++;
});
$('.account-link').click(function () {
if(accountclickCount%2==0){
//do when open
account_open();
menu_close();
cart_close();
}else{
//do when closed
account_close();
}
accountclickCount++;
});

$('.cart-link').click(function () {
if(cartclickCount%2==0){
//do when open
cart_open();
menu_close();
account_close();
}else{
//do when closed
cart_close();
}
cartclickCount++;
});

});

与它必须的相比，这似乎相当大，并且似乎可能有更好/更简单的方法。 但老实说，不确定这通常如何完成。

保留这样的设置是否更好，因为每个设置都单独控制并手动关闭另一个？或者，将它们组合成一个更强大、更小的功能，仍然根据需要控制它们，是否更好？

如果最好组合成一个更简单的函数，那么如何在它仍然打开和关闭每个下拉部分的位置完成此操作？

我取了 1 个工作功能并复制它以使这项工作按原样进行。 所以现在我很好奇这与被认为是行业标准和实用的东西相比如何。

HTML很简单。

菜单内容

<div id="myNav_overlay" class="overlay_background"></div>
<div id="myNav" class="nav-overlay">
<div class="overlay-content">
MENU
</div>
</div>

帐户内容

<div id="myAccount_overlay" class="overlay_background"></div>
<div id="myAccount" class="account-overlay">
<div class="overlay-content">
ACCOUNT
</div>
</div>

购物车内容

<div id="myCart_overlay" class="overlay_background"></div>
<div id="myCart" class="cart-overlay">
<div class="overlay-content">
CART
</div>
</div>

Answer 1

在不过多地设计示例的情况下，使用 jQuery 的奇迹，您可以这样做：

(1(单击时，选择所有菜单容器(在我的示例中为.ddown类(

(2( 将所有菜单容器返回到其默认高度零(通过删除具有新高度的 .showMenu 类(

(3( 仅对于单击的容器，应用增加容器高度的样式。

$('.ddown').click(function(){
$('.ddown').removeClass('showMenu');
$(this).addClass('showMenu');
});

.container{height:100px;}
.ddown{display:inline-block;width:100px;border:1px solid #ccc;overflow:hidden;}
.mnuTitle{height:20px;}
.mnuContent{height:0;background:white;}
.showMenu{height:100px;background:palegreen;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div id="myNav" class="ddown">
<div class="mnuTitle">Menu</div>
<div class="mnuContent">
MENU CONTENT
</div>
</div>
<div id="myAccount" class="ddown">
<div class="mnuTitle">Account</div>
<div class="mnuContent">
ACCOUNT CONTENT
</div>
</div>
<div id="myCart" class="ddown">
<div class="mnuTitle">Cart</div>
<div class="mnuContent">
CART CONTENT
</div>
</div>
</div><!-- .container -->