0

我现在正在研究我的投资组合网站的导航，我无法弄清楚如何将其他属性添加到我的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>
4

1 回答 1

0

我尝试过使用 chackbox，这是一个示例，我不知道是否是您想要的，但请看这个小提琴：

小提琴

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

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

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

});
于 2012-06-26T06:08:28.667 回答