2015-02-24 105 views
0

基本上我有一個畫廊(網格),當每個單獨的塊被點擊時,它顯示一個隱藏的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

+0

你需要這個? http://jsfiddle.net/6zqr5qv1/2/ – 2015-02-24 04:43:14

回答

0

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

0

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

$(".glry-itm").addClass("On");將增加類的所有glry-itm元素。如果您使用this點擊彎內,它將類添加到當前點擊的元素

Fiddle

+0

關閉但隻影響第一個點擊。我需要它來實現單擊一個(塊)的效果。即你的解決方案是第一塊沒有着色,但它可以是任何隱藏的div顯示。我需要Bloc和Hidden div是平行的,如果第三個塊被點擊,它不應該是橙色,第三個隱藏的div顯示。我需要它改變每一個不同的塊被點擊 – 2015-02-24 04:48:53

0

在你的CSS,刪除:before.Off

.Off { 
    background: none; 
    } 

如這裏:http://jsfiddle.net/6zqr5qv1/4/

另外,你可以將這一行從你的if/then/else中分出來,並且只在if之前有一次:

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

這是有道理的,並清理我的代碼,但它並沒有關閉/打開正常工作。當隱藏的div可見時,parent .glry-itm應該關閉。 – 2015-02-24 05:08:35

相關問題