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

如果页面上只有一个“code-left”和一个“code-right”，Phill 的回答会很有效。

如果你有不止一个，并且正在点击“demobox-dark”，然后尝试获得下一个“code-left”，因为你在两者之间有一个段落，它不会真的是接下来。

您可以改为使用nextAll而不是next这样做吗？例如，

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

祝你好运！

于 2009-08-19T20:33:08.487 回答
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 回答
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 回答