Jquery Select 单击 div 等 div 具有相同 class

Question

基本上我有一个画廊（网格），当每个 dividual 块被点击时，它会显示一个隐藏的 div。我有那个功能。我还在每个块上有一个颜色叠加层，在悬停时消失。我还希望隐藏的 div 父块没有覆盖 - 当隐藏的 div 可见时。目前它移除了所有父块的覆盖，应该只有父块显示隐藏 div。查看 fiddle 以进一步了解。

$(".glry-itm").click(function() {
    $(".hidden").slideUp();
    if ($(".hidden").is(":visible")) {
        $(this).next(".hidden").slideToggle(300);
        $(".glry-itm").addClass("On");

    } else{

        $(this).next(".hidden").slideToggle(300);
        $(".glry-itm").addClass("Off");
   }

});

JsFiddle Here

Answer 1

使用$(this).addClass("On");代替$(".glry-itm").addClass("On");

$(".glry-itm").addClass("On"); 会将 class 添加到所有 glry-itm 元素。如果您在点击处理程序中使用 this，它会将 class 添加到当前点击的元素

Fiddle

Answer 2

在您的 CSS 中，从 .Off 中删除 :before：

  .Off {
    background: none;
  }

如这里：http://jsfiddle.net/6zqr5qv1/4/

此外，您可以将此行从您的 if/then/else 中排除，并且只在 if:

之前使用一次

  $(this).next(".hidden").slideToggle(300);

Answer 3

我添加了 $(".glry-itm").addClass("On"); 并使用了 $(this) 而不是 (".glry-itm")

 $(".glry-itm").click(function() {
    $(".glry-itm").addClass("On");
    $(".hidden").slideUp();
    $(this).next(".hidden").slideToggle(300);
    if ($(".hidden:visible")) {
        $(this).removeClass("On");
        $(this).addClass("Off");
    } else {
        $(this).removeClass("Off");
        $(this).addClass("On");
    }
});

Edited Fiddle

Jquery Select 单击 div 等 div 具有相同 class

Jquery Select the clicked div among other divs with the same class

css

jquery

hidden

addclass

slidetoggle