有了第一個孩子在手風琴

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> 

而且我要的是訪問該頁面時，第一個選項卡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

或者嘗試添加該

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

後您的

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

Answer 2

你可以只添加這在你的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 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上的第一個.accordionButton在.container下。在你的情況，你應該改變.container與手風琴

的父DIV