Question

这是一个非常基本的问题，但我已经有一段时间没有找到解决方案了。

我在HTML文档中有一系列<li>个项目。在每个结尾，我有一个我想要的按钮，当点击时，显示一些隐藏的文字。

<ol>
    <li>Click this button to show hidden text <button>Click</button>
    <p style="display:none;">Some text</p></li>
</ol>

由于我有一系列这些<li>，我认为最简单的方法是让每个按钮点击通过JQuery显示最近的隐藏元素

这是我一直在尝试使用的JQuery代码：

$('button').click(function() {
    $('p.pages').nextUntil('li').toggle('slow');
});

老实说，我不确定我是否使用正确的JQuery方法来做到这一点，但我已经尝试了查看JQuery文档，看起来这最适合我正在尝试做的事情。< / p>

Answer 1

你要找的是

$('button').click(function() {
    $(this).next('p').toggle('slow');
});

fiddle

Answer 2

您提供的代码存在多个问题。

您正在使用p.pages选择器，该选择器会查找<p> class="pages"。使用此选择器，您在文档中找不到任何内容。

另一个问题是因为您使用的是$('button')选择器，这将适用于您网页上的所有<button>，而不仅仅是该列表中的按钮。

接下来，当您实际尝试切换<p>本身时，您正在<{1>} 之后查找元素。

最后一个问题是这段代码只支持一个这样的项目。您没有指定选择哪个 <p>，因此当您点击页面上的任何按钮时，您将隐藏第一个<p>，即使该按钮位于下方列表。

解决方案

如果你有不同的按钮类型，我会在按钮上指定一个类来选择它。

我还会使用<p>（对于按钮）和$(this)在您推送的特定按钮后找到.next('p')。

然后我会使用p删除CSS display。或者在原始问题中使用.css('display', 'inherit')：

请参阅this fiddle。

HTML：

.toggle('slow')

JS：

<ol> <li>Click this button to show hidden text <button class="makeVisible">Click</button> <p style="display:none;">Some text</p> </li> </ol>

Answer 3

$('button').click(function() {

$(this).next().toggle('slow'); });

如何使用jQuery单击方法显示隐藏的元素？

3 个答案:

解决方案