以摺疊方式摺疊動態添加的製表符

Question

下面是一個示例。

$(function() { 
 
     var icons = { 
 
      header: "ui-icon-circle-arrow-e", 
 
      headerSelected: "ui-icon-circle-arrow-s" 
 
     }; 
 
     $("#accordion").accordion({ 
 
      icons: icons, 
 
      collapsible: true 
 
     }); 
 
     $("#header1").click(function(e) { return false; 
 
      $("#accordion").accordion("option", "icons", false); 
 
     }); 
 
}); 
 

 
$('#accordion .accClicked') 
 
     .off('click') 
 
    .click(function(){ 
 
     $(this).next().toggle('fast'); 
 
    }); 
 

 
    $('#add').click(function() { 
 
     var $tab="<h3 id='header3' class='accClicked'><a href='#'>Section 3</a></h3><div>Bonjour Stackoverflow</div>"; 
 
     $('#accordion').append($tab); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="accordion"> 
 
    <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3> 
 
    <div> Good Morning Stackoverflow</div> 
 
    <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3> 
 
    <div>Buongiorno Stackoverflow</div> 
 
    <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3> 
 
    <div>Bonjour Stackoverflow</div> 
 
</div> 
 

 
<button id="add"> 
 
Add tab 
 
</button>

http://jsfiddle.net/xso14hct/

我可以添加新的選項卡，但我不能垮了。我搜索並發現我應該以某種方式更新DOM，但我只是沒有找到我該怎麼做。

我可以簡單地使用jquery-ui手風琴，但問題是，當您打開另一個選項卡時，它會自動關閉打開的選項卡，但我不需要。這是一個鏈接：JQuery-UI Accordion

Answer 1

您需要將處理程序分配到新選項卡。勾選此

$(function() { 
    var icons = { 
    header: "ui-icon-circle-arrow-e", 
    headerSelected: "ui-icon-circle-arrow-s" 
    }; 
    $("#accordion").accordion({ 
    icons: icons, 
    collapsible: true 
    }); 
    $("#header1").click(function(e) { 
    return false; 
    $("#accordion").accordion("option", "icons", false); 
    }); 
}); 

$('#accordion .accClicked') 
    .off('click') 
    .click(function() { 
    $(this).next().toggle('fast'); 
    }); 

var i = 4; 
$('#add').click(function() { 
    var $tab = "<h3 id='header" + i + "' class='accClicked'><a href='#'>Section " + i + "</a></h3><div>Bonjour Stackoverflow</div>"; 
    $('#accordion').append($tab); 
    $('#accordion .accClicked') 
    .off('click') 
    .click(function() { 
     $(this).next().toggle('fast'); 
    }); 
    i++; 
}); 

Answer 2

您可以把點擊改寫成一個功能，再次爲您添加的每個選項卡中運行它：

$(function() { 
    var icons = { 
     header: "ui-icon-circle-arrow-e", 
     headerSelected: "ui-icon-circle-arrow-s" 
    }; 
    $("#accordion").accordion({ 
     icons: icons, 
     collapsible: true 
    }); 
    $("#header1").click(function(e) { 
     return false; 
     $("#accordion").accordion("option", "icons", false); 
    }); 
}); 

// from here we change to: 
function resetTabClick() { 
    $('#accordion .accClicked') 
     .off('click').click(function(){ 
      $(this).next().toggle('fast'); 
    }); 
} 
resetTabClick(); 

$('#add').click(function() { 
     var $tab="<h3 id='header3' class='accClicked'><a href='#'>Section 3</a></h3><div>Bonjour Stackoverflow</div>"; 
     $('#accordion').append($tab); 

     resetTabClick(); 

}); 

Answer 3

你非常接近。你只需要將你的回調函數封裝在一個函數中，這樣你可以在向DOM添加一個新標籤時調用它。

此外，如果您想要新標籤初始關閉，請添加樣式display: none;。

$(function() { 
 
    var icons = { 
 
     header: "ui-icon-circle-arrow-e", 
 
     headerSelected: "ui-icon-circle-arrow-s" 
 
    }; 
 
    $("#accordion").accordion({ 
 
     icons: icons, 
 
     collapsible: true 
 
    }); 
 
    $("#header1").click(function(e) { 
 
     return false; 
 
     $("#accordion").accordion("option", "icons", false); 
 
    }); 
 
}); 
 

 
function makeNewTab() { 
 
    $('#accordion .accClicked') 
 
     .off('click').click(function(){ 
 
      $(this).next().toggle('fast'); 
 
    }); 
 
} 
 

 
$('#add').click(function() { 
 
     var $tab="<h3 id='header3' class='accClicked'><a href='#'>Section 3</a></h3><div style='display:none;'>Bonjour Stackoverflow</div>"; 
 
     $('#accordion').append($tab); 
 
     makeNewTab(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="accordion"> 
 
    <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3> 
 
    <div> Good Morning Stackoverflow</div> 
 
    <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3> 
 
    <div>Buongiorno Stackoverflow</div> 
 
    <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3> 
 
    <div>Bonjour Stackoverflow</div> 
 
</div> 
 

 
<button id="add"> 
 
Add tab 
 
</button>