使用jquery有更好的方法来实现这一点吗

Question

我正在尝试隐藏所有元素when one button is clicked and only the menu belonging to that specific button should appear。如果我真的喜欢这个，如果有更多的按钮和菜单，那就太长了。

有什么方法可以缩短这一时间并获得所需的结果吗？

$(document).ready(function(){  
$("#steps").click(function(){
$("#calculateMenu").hide();
$("#stepsMenu").show();    
});
$("#calculate").click(function(){ 
$("#stepsMenu").hide(); 
$("#calculateMenu").show();
});
});

Answer 1

你可以这样做：

$("#steps,#calculate").click(function() {
var id = $(this).attr("id");
$("[id*=Menu]").hide();
$("#" + id + "Menu").show();
});

id包含Menu的所有元素都将被隐藏，然后我们将显示"；正确的"；元件

演示

$("#steps,#calculate").click(function() {
var id = $(this).attr("id");
$("[id*=Menu]").hide();
$("#" + id + "Menu").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="steps">steps</button>
<button id="calculate">calculate</button>

<div id="stepsMenu">stepsMenu</div>
<div id="calculateMenu">calculateMenu</div>

Answer 2

当单击一个按钮时，唯一属于该特定的菜单按钮应出现

作为@freedomn-m的评论，

您可以使用data-attributes在button and menu和class选择器之间进行链接，如下所示：

$(".Mybutton").click(function() {
var activeMenu = $(this).data('buttonname');
$(".menu").hide();
$("#" + activeMenu).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='Mybutton' data-buttonname='steps'>steps</button>
<button class='Mybutton' data-buttonname='calculate'>calculate</button>
<button class='Mybutton' data-buttonname='finish'>finish</button>
<div class='menu' id="steps">stepsMenu</div>
<div class='menu' id="calculate">calculateMenu</div>
<div class='menu' id="finish">finishMenu</div>