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

您可以使用几种方法：

使用CSS设置可见性。 jQuery的show()和hide()方法只需切换display属性，因此使用CSS类将其设置为none。
在每个标签上使用一个类，并在页面加载（$('.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();

如何折叠页面加载时的所有标签？

1 个答案: