切換的div if語句

我有這樣的HTML：切換的div if語句

<div id="parent1" class="article"> 
    <div class="action"></div> 
    <div id="exp1" class="expand"></div> 
</div> 
<div id="parent2" class="article"> 
    <div class="action"></div> 
    <div id="exp2" class="expand"></div> 
</div>

和CSS：

.article:hover .action { 
    z-index:1000; 
} 
.expand { 
    display: none; 
} 
action { 
    background: url(../images/down.png) 0 0 no-repeat; 
    z-index: -999; 
} 
.collapse { 
    background: url(../images/up.png) 0 0 no-repeat !important; 
    z-index: 1000; 
}

和Javascript：

$(".article").click(function() { 
    $(this).find(".action").toggleClass("collapse"); // works onclick div article 
    ????????? // when press parent1 if parent2 pressed before ???????.find(".action").toggleClass("collapse"); 
    $("#exp2").hide(); // if previously open 
    $("#exp1").toggle(300); 
}

現在我需要的jQuery的的onclick parent1到toggleClass行動父母2，但只有如果prevously切換崩潰。

來源

2011-12-11 user1080711

其一， z-index = 1000;'不是有效的CSS;它應該是：'z-index：1000;'。 –

感謝您的注意事項 – user1080711

有很多方法可以做到這一點。通常我會存儲一個保存下拉狀態（布爾值）的局部變量，然後檢查它。

使用jQuery，因爲你已經在使用隱藏（），您可以使用：

if ($("#exp2").is(":hidden")) { 
    // Show content, set arrow to up. 
    $("#exp2").removeClass("expand").addClass("collapse"); 
} 
else { 
    // Hide content, set arrow to down. 
    $("#exp2").removeClass("collapse").addClass("expand"); 
}

肘會更有意義，如果你只是添加和刪除的一類。這裏你是交替的類。使用addClass（）和removeClass（）可以非常清楚你在做什麼。

來源

2011-12-11 04:47:08 Xcalibur37

我如何調用這個函數onclick parent1爲parent2 $（＃parent2）.find（「。action」）。toggleClass（「collapse」）;不在工作 – user1080711

我明白你在問什麼，但那真的只會讓它變得更加混亂。如果它是交替的，你可以用兩種onclick事件調用的一種方法處理它。我知道jQuery的意圖，但我認爲它的功能有點高。如果使用單一的方法方法（與如$（「＃EXP2」）爲（公共變量「：隱藏」），你可以得到你想要的結果 – Xcalibur37

我做了這樣的事情\t \t \t \t \t \t。 <腳本類型= 「文/ JavaScript的」> \t \t \t \t \t \t \t \t $（「＃art21」）。點擊（函數（）{ \t \t \t \t \t \t \t \t如果（！（$（「＃（「：hidden」））&&（$（「＃exp21」）。is（「：hidden」）））{ \t \t \t \t \t \t $（「＃exp22」）。隱藏（）; （「＃art22」）。find（「.action」）。toggleClass（「collapse」）; \t \t \t \t \t \t \t} \t \t \t \t \t \t \t \t \t $（「＃exp21」）切換（300）;} – user1080711

我在這裏猜測，但我想你想關閉任何打開的.article並打開你點擊的那個。

$(".article").click(function() { 
    // see explanations 1 and 2 below 
    $('.article.active').removeClass('active').find('#exp1').hide(); 

    // see explanation 3 below 
    $(this).addClass('active').find('#exp2').show(); 
}

您可以更改代碼，以滿足您的需要，但這樣你就明白：

當我們點擊一個.article，我們尋找其他.article與特定的類（。主動在我的例子中）。從技術上講，有可能會唯一的一個.article.active
我們刪除了。主動類，做任何它或它的子
我們終於做`無論在點擊文章

來源

2011-12-11 05:34:45 karellm

切換的div if語句

回答

相關問題