0

グラフィックのデモボックスを表示するためのいくつかのdivと、グラフィックを使用するためのサンプルコードを表示するためのコードボックスがあります。私がやりたいのは、デモボックスをクリックするまでコードボックスを非表示にすることです。これにより、コードボックスがスライドして表示されます。（どのように見えるかについては、ここを参照してください）

これは、以前に何度か行ったことがあるので、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ウィザードではありません。

4

4 に答える 4

2

ページに「コード左」と「コード右」が1つしかない場合は、フィルの答えがうまく機能します。

これらが複数あり、「demobox-dark」をクリックして、次の「code-left」を取得しようとしている場合は、2つの間に段落があるため、実際にはそうではありません。次へ。

nextAll代わりに、これを行う代わりに使用できnextますか？例えば、

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

幸運を！

于 2009-08-19T20:33:08.487 に答える
0 
$(".demobox-dark").click(function()
  {
    $(".code-left").slideToggle(600);
  });
  $(".demobox-light").click(function()
  {
    $(".code-right").slideToggle(600);
  });
于 2009-08-19T20:26:23.040 に答える
0

Firefoxを使用して、Firebugsコンソールからコマンドの一部を実行すると、$(this).next(".code-left")要素が返されません。これはあまりきれいではないと思いますが、

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

乾杯。

編集：誤ってローカル変数を保持しました。

于 2009-08-19T20:32:24.590 に答える
0

Funkaの答えはうまく機能します。私はおそらくもっと構造化されたアプローチで行くでしょう。各コードブロックが1つのデモボックスにのみ関連付けられると仮定します。各デモボックス、私は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-19T20:50:52.273 に答える