如何选择 <p> jQuery中的元素

Question

我已经在下面发布了我的代码，我想做的是选择所单击按钮下方的“ p”元素。 我尝试了几个选择器，但都没有成功...

这是我的HTML：

<button class="accordion">Section 1</button>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

这是我的jQuery：

var container = $("#container");
var allPanels = $(".panel");
var acc = $(".accordion");
var active = $(".active");


$(document).ready(function(){

$(".panel:first").show();
$(".accordion:first").toggleClass("active");

acc.click(function() {
    active.toggleClass("active");
    $(this).toggleClass("active");

    allPanels.hide();
    $(this).children('p').children('p').first().show();
    //The above selector is wrong.
  });
});

Answer 1

您做错了，现在尝试选择不存在的.accordion的children ，可以使用next（） 。

 var container = $("#container"); var allPanels = $(".panel"); var acc = $(".accordion"); var active = $(".active"); $(document).ready(function() { $(".panel:first").show(); $(".accordion:first").toggleClass("active"); acc.click(function() { active.toggleClass("active"); $(this).toggleClass("active"); allPanels.hide(); $(this).next('.panel').show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div> 

Answer 2

这将起作用，而不是children选择器使用next因为它不是.accordion的子元素，并且当您隐藏panel ， p标签将不可见，然后使用$(this).next('.panel').show();

 var container = $("#container"); var allPanels = $(".panel"); var acc = $(".accordion"); var active = $(".active"); $(document).ready(function(){ $(".panel:first").show(); $(".accordion:first").toggleClass("active"); acc.click(function() { active.toggleClass("active"); $(this).toggleClass("active"); allPanels.hide(); $(this).next('.panel').show(); //The above selector is wrong. }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum 1...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum 2...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum 3...</p> </div> 

Answer 3

.next | jQuery API

给定一个表示一组DOM元素的jQuery对象，.next（）方法允许我们在DOM树中搜索这些元素的紧随其后的同级结构，并从匹配的元素构造一个新的jQuery对象

因此，使用以下命令选择立即div

$(this).next('div')

Answer 4

我会将按钮变成单选按钮。 然后，您可以使用CSS完成整个操作。

.accordion:checked + p {
    //your show css
}

假设您只想一次显示一个。 如果没有，请使用复选框。

Answer 5

 var container = $("#container"); var allPanels = $(".panel"); var acc = $(".accordion"); var active = $(".active"); allPanels.hide(); $(document).ready(function() { $(".panel:first").show(); $(".accordion:first").toggleClass("active"); acc.click(function() { active.toggleClass("active"); $(this).toggleClass("active"); $('div.panel').not(this).hide();//hide other div $(this).next('div').show();//show div //The above selector is wrong. }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button class="accordion">Section 1</button> <div class="panel"> <p>Section 1</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Section 2</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Section 3</p> </div> 

1. 使用此.next() 。

Answer 6

尝试此代码。

 $(function() { $('.panel').hide(); $('.panel:first').show(); $('.accordion').click(function() { $(this).next().slideToggle().siblings('.panel').slideUp(500); }); }); 

 button{ display:block } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>