切换一个元素会禁用其他元素答案

【问题标题】：Toggling one element disables the others切换一个元素会禁用其他元素
【发布时间】：2016-07-04 04:20:21
【问题描述】：

$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();
    $('.cat'+$(this).attr('data-prod-cat')).toggle();
}); });

我将它应用到我的桌子上，但我需要当一个按钮被按下时其他按钮隐藏起来，就像一个菜单一样，我该怎么做？

【问题讨论】：

标签： javascript jquery css menu html-table

【解决方案1】：

这应该可以工作

$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $('tr[class^=cat]').hide();
        $('.cat'+$(this).attr('data-prod-cat')).show();
    });
});

【讨论】：

谢谢！这正是我想要的！但我想知道，是否可以在切换中添加一些过渡或效果？
是的，你可以；例如，您可以更改duration。

【解决方案2】：

很简单我更新了http://jsfiddle.net/GqS7W/832/

$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();
    $('.cat'+$(this).attr('data-prod-cat')).siblings('.item').slideUp();
   $('.cat'+$(this).attr('data-prod-cat')).slideDown();
});
});

【讨论】：

【解决方案3】：

试试这个

$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();       
    $(".toggler").parent().parent().toggle();
    $(this).parent().parent().show();        
    $('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});

【讨论】：