文本显示和隐藏按钮 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

这将 select 并在整个页面上切换所有个 dd 实例。

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

这将 select 并切换 dd 的预期实例，最靠近您按下的按钮。

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

它使用 ($this) 获取您实际按下的按钮，使用 .closest('dl') 找到父 dl，然后使用 .find('dd').[=17 在该 dl 实例中查找 dd =]

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

text show and hide with button php/js

php

jquery

text

show

hide