Question

如果我想单击h3 show p，我该如何改进我的脚本 - 但是我有更多这些元素并且它们在点击时打开。是否有必要提供所有h3 id？

$('.question h3').click(function(){
$('.question p').toggle();
});

Answer 1

p元素是h3元素的下一个兄弟。您可以.next()以及点击的元素jquery对象来定位相关的p元素：

$('.question h3').click(function(){
  $(this).next().toggle();
});

$('.question h3').click(function(){
  $(this).next().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<h3>One</h3>
<p>p - one</p>
<h3>Two</h3>
<p>p - two</p>
<h3>Three</h3>
<p>p - three</p>
</div>

Answer 2

你可以尝试这样：

https://jsfiddle.net/ay6xocLx/1/

 $('.question h3').click(function(){
    $(this).next('p').toggle();
 });

通过$.next()我们定位下一个DOM元素。

Answer 3

由于.next()非常脆弱（只搜索问题，例如＆＃39;为什么没有。下一个工作＆＃39;），你可以将你的h3 / p包装在另一个div中，给你比html布局更灵活。

<div class="question">
    <div class='answer'>
        <h3>One</h3>
        <p>p - one</p>
    </div>
    <div class='answer'>
        <h3>Two</h3>
        <p>p - two</p>
    </div>
    <div class='answer'>
        <h3>Three</h3>
        <hr />
        <p>p - three</p>
    </div>
</div>

然后，您可以转到包装器div并返回到p

您将在q3中看到我已添加<hr>，而.next()或.next("p")的任何解决方案都会失败。

$('.question h3').click(function(){
    $(this).closest(".answer").find("p").toggle();
});

.next()的另一种选择。是.nextAll().first()，即：

$('.question h3').click(function(){
    $(this).nextAll("p").first().toggle();
});

还允许html更灵活，并且可以使用上面添加的<hr/>。

点击课堂上的功能

3 个答案: