Question

我正在开发一个投资组合网站，我希望能够在显示工作的页面中标记项目，以便您可以切换可见性。我现在设置了.toggle（），这是有效的，除非我想使用多个标签，它会抛弃其他标签。您看到这是我网站上的操作 - http://nu-creative.com/ourwork.html

在左侧，您可以切换品牌和案例研究，但第三张图片被标记为两者，因此当您一个接一个地点击它时，它会隐藏它应该显示它，反之亦然。

代码全部位于页面底部，但是相关jQuery的片段在这里：

        $("#branding").click(function () {
            $(this).toggleClass("showItem");
            $(".brandingHide").toggle("slow", function () {

            });
        }); 


        $("#case").click(function () {
            $(this).toggleClass("showItem");
            $(".caseHide").toggle("slow", function () {

            });
        });

然后＆lt; -li＆gt;具有适当的ID，并且类位于隐藏的网格中的div上。如果我有两个按钮 - 一个隐藏和一个节目，我可以使它工作，但这将是奇怪的。我也可以通过使灰色成为单独的图层来破解它，这样当您再次单击时，实际上是单击另一个项目然后消失并再次显示显示按钮。但是必须有更好的方法！

提前致谢！

解决方案

http://jsfiddle.net/ngau3xjL/5/

Answer 1

您只需完成动画逻辑即可。这种方法的优点是它更冗长，但仍然只有一个DOM查找。

   $("#branding").click(function () {
       var $element = $(this);
       var isVisible = $element.hasClass('showItem');
       if(isVisible)
           $element.removeClass("showItem");
       } else {
           $element.addClass("showItem");
       }
    });

http://jsfiddle.net/ngau3xjL/4/

是否有.toggle（）的替代方案可让我控制开/关？

1 个答案: