Question

我正在处理我的投资组合网站的导航，我无法弄清楚如何将其他属性添加到我的toggle()函数中。

它基本上是一个有4个可能选项的过滤系统，它们是..

所有
互动
图形
音频

我想这样做，以便当您点击按钮时淡出所有其他选项，并在相应的内容部分淡出。

例如 - 点击交互式按钮即可：

“如果所有内容都可见，淡出，并在交互式淡出”+“（如果是图形）如果音频可见，则可见，淡出并淡入交互式“+” 淡出，淡入互动“

所以我只需按一下按钮即可覆盖所有基地..

我尝试在这里为代码添加多个ID失败：

$(document).ready(function(){
$("#filter-interactive").toggle(function() {
  $("#wrapper-thumbnails-all, #wrapper-thumbnails-graphic, #wrapper-thumbnails-audio").fadeOut(function() { $("#wrapper-thumbnails-interactive").fadeIn(); });
}, function() {
  $("#wrapper-thumbnails-interactive").fadeOut(function() { $("#wrapper-thumbnails-all").fadeIn(); });
  });
});

这基本上是我简化的html结构： 只有ALL部分以可见的方式开始，其他所有部分都设置为Display：none;

<body>

<div id="wrapper-thumbnails-all">
 Content
</div>

<div id="wrapper-thumbnails-interactive">
 Content
</div>

<div id="wrapper-thumbnails-graphic">
 Content
</div>

<div id="wrapper-thumbnails-audio">
 Content
</div>

</body>

Answer 1

我试过一个复选框，这是一个例子，我不知道你是否想要，但看到这个小提琴：

Fiddle

$('#wrapper-thumbnails-all').fadeIn();

$('input:checkbox').change(function(){

    if ($(this).is(':checked')){
        $('#wrapper-thumbnails-'+$(this).val()).fadeIn();
    }else{
        $('#wrapper-thumbnails-'+$(this).val()).fadeOut();
    }

});

如果Div是A，B或C，则淡出OUT并淡入IN Div X.

1 个答案: