點擊頁面加載按鈕

Question

我目前正在嘗試使用按鈕實現類似手風琴的部分。 如果用戶單擊一個按鈕，則顯示內容。 但是我希望默認顯示第二個按鈕的部分。 有沒有辦法做到這一點？

這是我現在的代碼：

 jQuery(function() { jQuery('.ss_button').on('click', function() { jQuery('.ss_content').slideUp('fast'); jQuery(this).next('.ss_content').slideDown('fast'); }); });

 #ss_menu { width: auto; } .ss_button { background-color: #049132; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 10px; margin-bottom: 5px; color: #FFFFFF; } .ss_content { background-color: white; display: none; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ss_menu"> <div class="ss_button">Einsteiger</div> <div class="ss_content"> <p>Test1</p> </div> <div class="ss_button">Mittelklasse</div> <div class="ss_content"> <p>Test2</p> </div> <div class="ss_button">High-End</div> <div class="ss_content"> <p>Test3</p> </div> </div>

Answer 1

您可以通過幾種方式做到這一點，1 可能是：

jQuery('.ss_content').eq(1).show();

或者你可以觸發第一個ss_button的點擊事件

jQuery('.ss_button').eq(1).click();

演示

 jQuery(function() { jQuery('.ss_button').on('click', function() { jQuery('.ss_content').not(jQuery(this).next('.ss_content')).slideUp('fast'); jQuery(this).next('.ss_content').slideToggle('fast'); }); jQuery('.ss_content').eq(1).show(); });

 #ss_menu { width: auto; } .ss_button { background-color: #049132; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 10px; margin-bottom: 5px; color: #FFFFFF; } .ss_content { background-color: white; display: none; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ss_menu"> <div class="ss_button">Einsteiger</div> <div class="ss_content"> <p>Test1</p> </div> <div class="ss_button">Mittelklasse</div> <div class="ss_content"> <p>Test2</p> </div> <div class="ss_button">High-End</div> <div class="ss_content"> <p>Test3</p> </div> </div>

Answer 2

作為“單擊按鈕以在頁面加載時顯示”的替代方法，您可以通過覆蓋display:none來顯示所需的內容。

這還有一個好處，即沒有在運行 js 來設置頁面時獲得的 FOUC（無樣式內容的閃存）（特別是如果有很多 js 或必須在 doc.ready 運行之前加載的大頁面）。

當然，這可能並非在所有情況下都是可行的，因此作為替代提供。

 jQuery(function() { jQuery('.ss_button').on('click', function() { jQuery('.ss_content').slideUp('fast'); jQuery(this).next('.ss_content').slideDown('fast'); }); });

 #ss_menu { width: auto; } .ss_button { background-color: #049132; border-bottom: 1px solid #FFFFFF; cursor: pointer; padding: 10px; margin-bottom: 5px; color: #FFFFFF; } .ss_content { background-color: white; display: none; padding: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ss_menu"> <div class="ss_button">Einsteiger</div> <div class="ss_content"> <p>Test1</p> </div> <div class="ss_button">Mittelklasse</div> <div class="ss_content" style='display:block;'> <p>Test2</p> </div> <div class="ss_button">High-End</div> <div class="ss_content"> <p>Test3</p> </div> </div>