javascript - jQuery div 可见性切换不起作用

Question

我有几个用于显示图形演示框的 div 和用于显示使用图形的示例代码的代码框。我想要做的是让代码框不可见，直到您单击演示框 - 这应该使代码框滑入 View 。 (See here to see how it looks)

使用 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);

祝你好运!