面板中的啓動面板：點擊內部面板時，兩個圖標都會切換

我有一個啓動面板，其中有另一個面板。兩者在面板標題中都有一個圖標。面板默認摺疊。當面板摺疊時，glyphicon-unchecked被設置。當我點擊這個圖形時，面板不會摺疊。我爲此編寫了以下JavaScript函數：面板中的啓動面板：點擊內部面板時，兩個圖標都會切換

$('#outerPanelGlyph').click(function() { 
    $('#outerPanelBody').collapse('toggle'); 
});

此功能正常。當我點擊這個時，外面的面板沒有塌陷，但內部仍然摺疊。我寫方法，使所述glyphicon獲取與「glyphicon選中」上交換uncollapse反之亦然：

$('#outerPanelBody').on('show.bs.collapse', function() { 
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check"); 
}); 

$('#outerPanelBody').on('hide.bs.collapse', function() { 
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked"); 
});

我寫完全相同的代碼作爲上述用於內面板。當我點擊內部面板的字形時，內部面板不會摺疊並且字形交換。但是，當我再次點擊內部面板的字形時，內部面板摺疊並且內部面板的字形和外部面板的字形都得到交換。當我點擊內部面板的圖形時，我只想要交換內部面板字形。

下面是HTML碼：

<div class="panel panel-dark" id="outerPanel"> 
    <div class="panel-heading"> 
     <span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="outerPanelGlyph"></i></span> 
    </div> 
     ....some code.... 
    <div class="collapse panel-body" id="outerPanelBody"> 
     <div class="panel panel-default" id="innerPanel"> 
      <div class="panel-heading panel-dark"> 
       <span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="innerPanelGlyph"></i></span> 
      </div> 
      <div class="collapse panel-body" id="innerPanelBody"> 
       ....some code.... 
      </div> 
     </div> 
    </div> 
</div>

來源

2016-01-08 VAL

小提琴會很好理解你在說什麼。 –

你可以在jsfiddle中添加代碼嗎？ –

當您單擊的內板，你也單擊外板，所以你需要在內部面板中單擊事件，否則這兩個事件將被解僱停止傳播。

$('#outerPanelBody').on('show.bs.collapse', function (e) { 
    e.stopPropagation(); 
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check"); 
}); 

$('#outerPanelBody').on('hide.bs.collapse', function (e) { 
    e.stopPropagation(); 
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked"); 
});

來源

2016-01-08 08:48:42

你爲錯誤的方法寫了這個，但它起作用，所以我選擇這個作爲答案。非常感謝你！ – VAL

史蒂夫哈里斯的答案確實奏效，但他用錯誤的方法寫出了答案。這裏是我的新方法切換字形：

$('#outerPanelBody').on('show.bs.collapse', function (e) { 
    e.stopPropagation(); 
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check"); 
}); 

$('#outerPanelBody').on('hide.bs.collapse', function (e) { 
    e.stopPropagation(); 
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked"); 
});

非常感謝您的快速幫助！

來源

2016-01-08 09:15:34 VAL

面板中的啓動面板：點擊內部面板時，兩個圖標都會切換

回答

相關問題