jQuery Id 选择器不起作用

Question

这是我的问题：

我有一组由 jQuery 脚本管理的三个手风琴盒，如下所示：

jQuery(document).ready(function($) {
    jQuery('.accordion .accordion-section-content').hide();
    jQuery('.accordion .accordion-section-title:first').addClass('active').next().show();
    jQuery('.accordion .accordion-section-title').click(function(){
        if( jQuery(this).next().is(':hidden') ) {
            jQuery('.accordion .accordion-section-title').removeClass('active').next().slideUp();
            jQuery(this).toggleClass('active').next().slideDown();
        }else {
     jQuery(this).removeClass('active').next().slideUp(); 
        }
        return false; // Prevent the browser jump to the link anchor
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
   <div class="accordion-section">
    <a class="accordion-section-title" style="text-align: center;" href="">Title1</a>
    <div id="accordion-1" class="accordion-section-content">
     <p>Some text</p>
    </div><!--end .accordion-section-content-->
   </div><!--end .accordion-section-->

   <div class="accordion-section">
    <a class="accordion-section-title" style="text-align: center;" href="">Title2</a>
    <div id="accordion-2" class="accordion-section-content">
     <p>Some text.</p>
    </div><!--end .accordion-section-content-->
   </div><!--end .accordion-section-->

   <div class="accordion-section">
    <a class="accordion-section-title" style="text-align: center;" href="">Title3</a>
    <div id="accordion-3" class="accordion-section-content">
     <p>Some text.</p>
    </div><!--end .accordion-section-content-->
   </div><!--end .accordion-section-->
  </div><!--end .accordion-->

如您所见，第二个 jQuery 将第一个手风琴框初始化为在加载页面时可见，效果很好。但我想显示第二个，即中间的那个。因此我试图改变

jQuery('.accordion .accordion-section-title:first')

来自

jQuery('#accordion-2')
jQuery('.accordion #accordion-2')
jQuery('.accordion').find('#accordion-2')
jQuery('.accordion .accordion-section-title #accordion-2')

我可以找到 select 一个元素的各种其他可能性（我认为这在这种情况下是合适的？），什么都没有...

我不明白为什么。

Answer 1

我相信

jQuery('.accordion .accordion-section-title:eq(1)')

应该可以解决问题。 :eq(1) 将过滤掉基于 0 的列表中的第二个 DOM 元素。

Answer 2

jQuery('.accordion .accordion-section-title:first') 选择 <a class="accordion-section-title" style="text-align: center;" href="">Title1</a>

jQuery('#accordion-2') 选择 <div id="accordion-2" class="accordion-section-content">.

你需要jQuery('#accordion-2').prev()

Answer 3

问题不在于您的 jQuery 选择器，而在于 .next();

试试这个（测试过，有效）：

    jQuery(document).ready(function($) {
    jQuery('.accordion .accordion-section-content').hide();
    jQuery('#accordion-2').addClass('active').show();
    jQuery('.accordion .accordion-section-title').click(function(){
        if( jQuery(this).next().is(':hidden') ) {
            jQuery('.accordion .accordion-section-title').removeClass('active').next().slideUp();
            jQuery(this).toggleClass('active').next().slideDown();
        }else {
        jQuery(this).removeClass('active').next().slideUp(); 
        }
        return false; // Prevent the browser jump to the link anchor
    });
});

jQuery Id 选择器不起作用

jQuery selector by Id not working

html

jquery

selector