Question

我有这段代码：

<div class="accordionButton">
    <span>Accordion Button</span><span class="plusMinus">+</span>
</div>
    <div class="accordionContent">
        <p>Stuff in the Accordion</p>
    </div>

<div class="accordionButton">
    <span>Accordion Button</span><span class="plusMinus">+</span>
</div>
    <div class="accordionContent">
        <p>Stuff in the Accordion</p>
    </div>

我希望在访问页面时打开第一个tab accordionContent框。但是当点击其他内容时，它会向上滑动并打开其他内容。如何修改代码以便第一个accorionContent框打开？

使用Javascript：

$(document).ready(function() {
    $('.accordionButton').click(function() {
        $('.accordionButton').removeClass('on');
        $('.accordionContent').slideUp('normal');
        $('.plusMinus').text('+');
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
            $(this).children('.plusMinus').text('-');
         } 
     });
    $('.accordionButton').mouseover(function() {
        $(this).addClass('over');
    }).mouseout(function() {
        $(this).removeClass('over');
    });
    $('.accordionContent').hide();

});

我试过

.accordionContent:first-child{
  display:block;
}

但它不起作用。有什么建议？

http://jsfiddle.net/Na5FY/110/

Answer 1

您可以在javascript的末尾添加此内容：

$('.accordionButton:first-child').click();

最终守则：

$(document).ready(function() {
    $('.accordionButton').click(function() {
        $('.accordionButton').removeClass('on');
        $('.accordionContent').slideUp('normal');
        $('.plusMinus').text('+');
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
            $(this).children('.plusMinus').text('-');
         } 
     });
    $('.accordionButton').mouseover(function() {
        $(this).addClass('over');
    }).mouseout(function() {
        $(this).removeClass('over');
    });
    $('.accordionContent').hide();

    $('.accordionButton:first-child').click();

});

Answer 2

或尝试添加此

$(".accordionContent").first().show();

之后

$(".accordionContent").hide();

Answer 3

试试这个;

$(document).ready(function() {

$('.accordionButton:eq(0)').trigger('click'); // the new line

$('.accordionButton').click(function() {
    $('.accordionButton').removeClass('on');
    $('.accordionContent').slideUp('normal');
    $('.plusMinus').text('+');
    if($(this).next().is(':hidden') == true) {
        $(this).addClass('on');
        $(this).next().slideDown('normal');
        $(this).children('.plusMinus').text('-');
     } 
});

$('.accordionButton').mouseover(function() {
    $(this).addClass('over');
}).mouseout(function() {
    $(this).removeClass('over');
});
$('.accordionContent').hide();

});

在类上添加DOM已准备好.container下的第一个.accordionButton。在您的情况下，您应该使用手风琴的父div更改.container

让第一个孩子用手风琴打开

3 个答案: