Javascript 使用js过滤器显示菜单

大家好，我现在正在为餐厅菜单构建一个简单的过滤器。 我有三个菜单

“menu1”“menu2”“menu3”

，我希望客户能够单击按钮并显示正确的菜单。然而，由于某种原因，我似乎根本无法让它发挥作用

所以我希望它在开始时只显示

“menu1”

，所以我给了

“menu2&3”

一个

显示：无

当用户点击按钮显示

menu2或3

时，它将显示正确的菜单，但是我无法让它工作：

HTML:

JS:

我试着用一个例子来让它工作，但我不知道我在做什么，我如何才能使这项工作，在这件事上的任何帮助将是伟大的

---

谢谢

您需要在

“li a”

上添加事件处理程序，并切换

targetDiv

s的可见性

$( "li a[id]" ).click( function(){
  $( ".targetDiv" ).hide().filter( "." + this.id ).show();
})

演示

$（“LIA[id]”）。单击（函数（）{
$（“.targetDiv”）.hide（）.filter（“.”+this.id）.show（）；
})

.menu2{
显示：无；
}
menu3先生{
显示：无；
}

第一菜单

美味佳肴
$35 
同一天，你将成为一名杰出的青年，你将成为一名杰出的青年。
第二菜单

美味佳肴
$45 
同一天，你将成为一名杰出的青年，你将成为一名杰出的青年。
第三菜单

美味佳肴
$45 
同一天，你将成为一名杰出的青年，你将成为一名杰出的青年。

您需要在

的“li a”

上添加事件处理程序，并切换

targetDiv的可见性

$( "li a[id]" ).click( function(){
  $( ".targetDiv" ).hide().filter( "." + this.id ).show();
})

演示


$（“LIA[id]”）。单击（函数（）{
$（“.targetDiv”）.hide（）.filter（“.”+this.id）.show（）；
})
.menu2{
显示：无；
}
menu3先生{
显示：无；
}








第一菜单

美味佳肴
$35 
同一天，你将成为一名杰出的青年，你将成为一名杰出的青年。
第二菜单

美味佳肴
$45 
同一天，你将成为一名杰出的青年，你将成为一名杰出的青年。
第三菜单

美味佳肴
$45 
同一天，你将成为一名杰出的青年，你将成为一名杰出的青年。
您可以更轻松地执行此操作，只需为
菜单使用全局类
/
按钮
默认情况下隐藏所有菜单即可。
当您
单击按钮
上的
隐藏
所有菜单并仅显示右菜单时


$（“.btn菜单”）。单击（函数（）{
var menuid=$（this.data（“menuid”）；
$（“.menu”）.hide（）；
$（“.menu”+menuid.show（）；
})
菜单{
显示：无；
}

显示菜单1
显示菜单2
显示菜单3
菜单1
菜单2
菜单3
您可以更轻松地执行此操作，只需为
菜单使用全局类即可
/
按钮
默认情况下隐藏所有菜单。
当您
单击按钮
上的
隐藏
所有菜单并仅显示右菜单时


$（“.btn菜单”）。单击（函数（）{
var menuid=$（this.data（“menuid”）；
$（“.menu”）.hide（）；
$（“.menu”+menuid.show（）；
})
菜单{
显示：无；
}

显示菜单1
显示菜单2
显示菜单3
菜单1
菜单2
菜单3
用户应在何处单击以使其他菜单可见？检查此提琴@gurvinder372按钮there@ZakariaAcharki这不是我想说的，我只是希望用户能够点击一个按钮，该按钮将显示菜单1或菜单2或菜单3。对不起，我的英语不是最好的，所以我可能没有解释清楚。用户应该在哪里点击以使其他菜单可见？检查此提琴@gurvinder372按钮there@ZakariaAcharki这不是我想说的，我只是想让用户能够点击一个按钮，该按钮将显示菜单1或菜单2或菜单3对不起，我的英语不是最好的，所以我可能没有解释好它在all@RonTheOld很乐意帮忙。@Lontheold很乐意帮忙。啊，这也很有效，然而，我确实希望在默认情况下显示菜单1，然后他们可以单击菜单2和3，只更新css，而不是.menu=>.menu2.menu3Ah。这也很好，但是我确实希望在默认情况下显示菜单1，然后他们可以单击菜单2和3，只更新css，而不是.menu=>.menu2.menu3
jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('.div' + $(this).attr('target')).show();
  });
});

$( "li a[id]" ).click( function(){
  $( ".targetDiv" ).hide().filter( "." + this.id ).show();
})