Question

基本上我有一个图库（网格），当单击每个单独的块时，它会显示一个隐藏的div。我有这个功能。我还在每个块上都有一个颜色覆盖，在悬停时消失。我还希望隐藏的div父块不具有覆盖 - 当隐藏的div可见时。目前它删除所有父块的覆盖，它应该只是显示隐藏div的父bloc。看看小提琴是否有进一步的理解。

$(".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");会为所有glry-itm元素添加类。如果您在点击处理程序中使用this，则会将该类添加到当前单击的元素

Fiddle

Answer 2

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

  .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选择具有相同类的其他div中单击的div

3 个答案: