Question

我有几块 d子显示图形的脱光箱和显示图象的样本代码箱。我想做的是,在你点击“ de”盒子之前,使密码箱变得看不见。 (。参看此处看它如何看待。

这应该简单,因为我以前曾几次这样做,但出于某种原因,我似乎不能让它现在工作。

在这里,我的准则缩短了。

<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>

是否有任何人发现错误? 原因我肯定会失败。随后,我肯定不会说出 Java。

Answer 1

如果你在网页上只有一个“密码-左”和一个“密码-right”,那么Phill的回答将非常有效。

如果你有其中不止一个,就把点击“血箱-dark”,然后试图获得next。由于你在两者之间有一段话,它实际上赢得了next<>。

您可使用<代码>next 所有而不是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

当我使用<0>条码时,你的一些指挥从火焰中穿过<条码>。我并不认为这是非常恰当的,但你可以尝试按照行文行事。

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

乘客。

EDIT:通过事故保持当地变量。

Answer 4

>Funka answer 工作出色。我可能采取更有条理的办法。假设每个代码组只与1个单元连接。每一台电车,我都提供一只电灯(基于你的血压页)——

$(".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>

友情链接