Question

我有几个用于显示图形演示框的div和用于显示使用图形的示例代码的代码框。我想要做的是使代码框不可见，直到你点击演示框 - 这应该使代码框滑入视图。（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

如果页面上只有一个“代码左”和一个“代码右”，Phill的答案将会很有效。

如果您有多个这样的内容，并且正在点击“demobox-dark”，那么尝试获取 next “code-left”，因为您之间有一个段落这两个，它不会真正是 next 。

您可以使用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的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>

jQuery div可见性切换不起作用

4 个答案: