文本显示和隐藏按钮php/js

Question

如何应用多个文本？用文本它的工作原理：

<dl> 
    <dt> 
     <img class="empfehlung-bild" style="max-width: 300px; height: auto; float: left; margin-right: 15px; margin-bottom: 15px;" src="<?php echo $bild; ?>" /> 
     <h1><?php echo $title; ?></h1> 
     <p> 
      <?php echo $text; ?> 
     </p><br/> 
     <button id="<?php echo $i; ?>" style="float:right;">Details</button><br/><br/> 
    </dt> 
    <dd style="float:left;"> 
     <h2><?php echo $secret_title; ?></h2> 
     <button id="<?php echo $i; ?>" style="float:right;">X</button> 
     <p> 
      <?php echo $secret_text; ?> 
     </p> 
    </dd> 
</dl> 

脚本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function() { 
      $("dd").slideToggle("slow"); 
     }); 
    }); 
</script> 

dd风格display: none。 $i是一个计数器（while）

问题是，如果我有多个dl，它会关闭并打开所有这些。

Answer 1

这将在整个页面上选择并切换全部dd的实例。

$("button").click(function() { 
    $("dd").slideToggle("slow"); 
}); 

这将选择并切换dd的最接近您按下的按钮的预期实例。

$("button").click(function() { 
    $(this).closest('dl').find('dd').slideToggle("slow"); 
}); 

这需要你实际上($this)按下按钮，找到与.closest('dl')父DL，然后查找DL与.find('dd')该实例中的DD。