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

Id的jQuery选择器无法正常工作

3 个答案: