Jquery选择同级别的其他div中的点击div

基本上我有一个画廊（网格），当每个单独的块被点击时，它显示一个隐藏的div。我有这个功能工作。我在每个在悬停时消失的块上都有一个颜色叠加层。我也希望隐藏的div父块没有覆盖 - 当隐藏的div可见时。此刻，它将删除所有父块的叠加层，并且它应该只是显示隐藏的div的父块。看看小提琴的进一步了解。Jquery选择同级别的其他div中的点击div

$(".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

来源

2015-02-24 Josh Kissel

你需要这个？ http://jsfiddle.net/6zqr5qv1/2/ – 2015-02-24 04:43:14

我加入$(".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

来源

2015-02-24 05:45:18

使用$(this).addClass("On");而不是$(".glry-itm").addClass("On");

$(".glry-itm").addClass("On");将增加类的所有glry-itm元素。如果您使用this点击弯内，它将类添加到当前点击的元素

Fiddle

来源

2015-02-24 04:44:32

关闭但只影响第一个点击。我需要它来实现单击一个（块）的效果。即你的解决方案是第一块没有着色，但它可以是任何隐藏的div显示。我需要Bloc和Hidden div是平行的，如果第三个块被点击，它不应该是橙色，第三个隐藏的div显示。我需要它改变每一个不同的块被点击 – 2015-02-24 04:48:53

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

.Off { 
    background: none; 
    }

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

另外，你可以将这一行从你的if/then/else中分出来，并且只在if之前有一次：

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

来源

2015-02-24 04:55:30

这是有道理的，并清理我的代码，但它并没有关闭/打开正常工作。当隐藏的div可见时，parent .glry-itm应该关闭。 – 2015-02-24 05:08:35

Jquery选择同级别的其他div中的点击div

回答

相关问题