Id不工作的jQuery选择器

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

和其他各种可能性，我可以找到选择一个元素的Id (我认为这在本例中是合适的？)，没有什么.

我不明白为什么。

Answer 1

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 2

我相信

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

应该能起作用。:eq(1)将过滤掉基于0的列表中的第二个DOM元素。

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
    });
});