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

您做错了，现在您正在尝试选择不存在的children .accordion，您可以使用 next() < /强>

＆＃13;
＆＃13;
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(); }); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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>

使用此.next()。

Answer 6

尝试使用此代码。

＆＃13;

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

＆＃13;

button{
  display:block
}

＆＃13;

<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>

＆＃13;

如何在jQuery中选择这个<p>元素

6 个答案: