如何在頁面加載時折疊所有選項卡？

Question

我正在使用我在線獲取的 Javascript 代碼來折疊和展開選項卡。 問題是我希望在頁面加載時折疊選項卡，但我不知道如何執行此操作。

我正在使用 Arpits Dynamics CRM 博客中的此代碼，並且更改了選項卡名稱。

誰能建議我如何讓標簽不僅在點擊時在加載時折疊？

$(document).ready(function () {

 // Collapsible tabs for Customer Information Tab (change the tab name in your case)
$('h2:contains("Customer Information")').html("Customer Information <span id='collapseId' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandId' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");

 // Collapsible tabs for Product Information Tab
 $('h2:contains("Product Information")').html("Product Information <span id='collapseIdP' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='expandIdP' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");

// For Customer Information Tab

// Hide Collapse Icon on load
$('#expandId').hide();

// Show expand icon, hide collapse icon and show respective tab on click of collapse icon
     $("#collapseId").click(function () {

        $('#expandId').show();
        $('#collapseId').hide();
        $("div[data-name='{34a2992a-9rr9-s1a6-8f37-g2b2214fded6}']").fadeIn(1000);

    });

// Show collapse icon, hide expand icon and show respective tab on click of expand icon 
    $("#expandId").click(function () {

        $('#collapseId').show();
        $('#expandId').hide();
        $("div[data-name='{34a2992a-9rr9-s1a6-8f37-g2b2214fded6}']").fadeOut();

    });

// For Product Information Tab

$('#expandIdP').hide();

$("#collapseIdP").click(function () {

        $('#expandIdP').show();
        $('#collapseIdP').hide();
        $("div[data-name='tab_4']").fadeIn(1000);

    });

 $("#expandIdP").click(function () {

        $('#collapseIdP').show();
        $('#expandIdP').hide();
        $("div[data-name='tab_4']").fadeOut();

    });

 });

Answer 1

您可以使用多種方法：

1. 使用 CSS 設置可見性。 jQuery 的show()和hide()方法只是切換display屬性，因此使用 CSS 類將其設置為none 。

2. 在每個選項卡上使用一個類並調用$('.that-class').hide(); 在頁面加載（ document.ready ）。

其他建議：大多數現代選項卡腳本不依賴於 ID，因為這會與您的標記緊密耦合——如果 ID 更改或添加更多，您必須更改腳本。 改用類，並按索引或位置引用內容。 例如：

$('.my-tab-class').click(function() {
   $('.my-tab-content-class').hide(); // close all
   $(this).next('.my-tab-content-class').show(); // open just the adjacent one
}

或者，對於不相鄰的選項卡內容：

$('.my-tab-class').click(function() { 
   var tabIndex = $(this).index();
   $('.my-tab-content-class').hide(); // close all

   // open just the one with the matching index location
   $('.my-tab-content-class').eq(tabIndex).show();
}

指示器圖標等也是如此。按位置引用它們，而不是笨拙的 ID 或其他特定字符串：

$(this).find('.my-icon-class').toggle();