jQuery的公開可見性切換不起作用

我有幾個div用於顯示圖形演示盒，以及用於顯示使用圖形的示例代碼的代碼框。我想要做的是讓代碼框不可見，直到你點擊演示框 - 這應該使代碼框滑入視圖。（See here to see how it looks）jQuery的公開可見性切換不起作用

這應該是超級簡單的jQuery，因爲我已經做了好幾次之前，但由於某種原因，我似乎無法得到它的工作這一次。

這裏是我的代碼的縮寫版本。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
    //hide the all of the element with class code-* 
    //$(".code-left").hide(); 
    //$(".code-right").hide(); 
--> 
    //toggle the component with the respective class 
    $(".demobox-dark").click(function() 
    { 
    $(this).next(".code-left").slideToggle(600); 
    }); 
    $(".demobox-light").click(function() 
    { 
    $(this).next(".code-right").slideToggle(600); 
    }); 
}); 
</script> 

<div class="demobox-light"> 
    <div class="color_blacktext"> </div> 
    <p>Black text</p> 
</div> 
<div class="demobox-dark"> 
    <div class="color_whitetext"> </div> 
    <p>White text</p> 
</div> 
<p>Code:</p> 
<div class="code-left"> 
    <p class="code">TEXT</p> 
</div>

任何人都可以發現錯誤？因爲我肯定不能。再說一遍，我絕對沒有JavaScript嚮導。

來源

2009-08-19 Tommy Brunn

如果您在頁面上只有一個「代碼剩餘」和一個「代碼正確」，Phill的答案會很好。

如果你有其中一個以上，並迎頭趕上「demobox暗」點擊，然後試圖讓下一個「代碼左」，因爲你必須在兩者之間的一段，它將不會真的成爲下一個。

你可以改爲使用nextAll而不是next來做到這一點？例如，

$(this).nextAll(".code-left:first").slideToggle(600);

祝你好運！

來源

2009-08-19 20:33:08 Funka

啊是的，'：第一個'會讓我的解決方案更好，並且和你一樣！+1 – theIV 2009-08-19 20:40:14

nextAll和：第一個很好地工作。 – 2009-08-19 20:43:18

這很棒，而且絕對美麗！ – 2009-08-19 20:48:13

$(".demobox-dark").click(function() 
    { 
    $(".code-left").slideToggle(600); 
    }); 
    $(".demobox-light").click(function() 
    { 
    $(".code-right").slideToggle(600); 
    });

來源

2009-08-19 20:26:23

明白了第一... +1 – ChaosPandion 2009-08-19 20:28:44

這將樣品中的工作，而是一個真正的網頁上（我認爲），它會切換所有具有類.code的事物 - 不僅留下一個div。 – 2009-08-19 20:31:16

而「真實頁面（我假設）」我的意思是一個包含許多代碼塊的頁面。 – 2009-08-19 20:32:19

當我使用Firefox和執行一些從Firebugs控制檯$(this).next(".code-left")你的命令不會返回任何元素。我不認爲這是非常漂亮的，但你可以嘗試做一些沿着

next_code_block = $(this).nextAll(".code-left")[0]; 
$(next_code_block).slideToggle(600);

乾杯。

編輯：保持本地變量的意外。

來源

2009-08-19 20:32:24 theIV

Funka的answer很好地工作。我可能會採取更結構化的方法。假設每個代碼塊只會與1個demobox相關聯。每個demobox，我會給出一個ID（根據您的演示頁） -

$(".demobox").click(function() 
{ 
    var $this = $(this); 
    $("#" + $this.id() + "_code").slideToggle(600); 
}); 

<div id="ubuntu_black_text" class="demobox demobox-dark"> 
</div> 
<div id="ubuntu_white_text" class="demobox demobox-light"> 
</div> 
<div id="ubuntu_black_text_code" class="code-left"> 
</div> 
<div id="ubuntu_white_text_code" class="code-right"> 
</div>

來源

2009-08-19 20:50:52

jQuery的公開可見性切換不起作用

回答

相關問題