jQuery div 可见性切换不起作用

Question

我有几个用于显示图形演示框的 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 奇才。

Answer 1

如果页面上只有一个“代码左”和一个“代码右”，菲尔的答案会很好。

如果您有多个这些，并且正在捕获“demobox-dark”上的点击，则尝试获取下一个“code-left”，因为两者之间有一个段落，它不会真的是下一个。

您可以使用 nextAll 而不是 next 来执行此操作吗？例如，

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

祝你好运！

Answer 2

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

Answer 3

当我使用 Firefox 并从 Firebugs 控制台执行某些命令时 $(this).next(".code-left") 不会返回任何元素。我认为这不是很漂亮，但你可以尝试做一些类似于

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

干杯的事情。

编辑：意外保留局部变量。

Answer 4

Funka 的 答案效果很好。我可能会采用更结构化的方法。假设每个代码块仅与 1 个 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>