Twitter Bootstrap手風琴功能

Question

使用Bootstrap和JavaScript，我將它用作手風琴格式 - 一旦點擊折疊的div ，它將打開並根據id顯示div的項目。

問題：

如果div不包含我想要打開的任何項目並向用戶顯示消息：

"no items here" 

我該怎么做呢？ 在JavaScript中？

這就是我所擁有的：

視圖

<div class="accordion-body collapse state-loading" data-group-id="13" data-bind="attr: { 'id': 'GroupMember_' + Id(), 'data-type-id': ModelId() }" id="GroupMember_15" data-type-id="15">
      <div class="accordion-inner no_border" data-bind="foreach: Children"></div><!--END: accordion-inner--></div>
</div>

如果Children是0我希望它打開並讓這個文字顯示： No items here

使用Javascript：

OnSuccess: function (data) {
                var _groups = linq.From(options.groupData);    
                var _groupsToUpdate = _groups .Where(function (x) { return x.Id == options.groupId; });
                if (_groupsToUpdate.Any()) {
                    _groupsToUpdate.First().Children = data.Items;                  
                }

不確定我是否遺漏了別的東西要分享 - 讓我知道。

UPDATE

Div布局：

<div class='accordion-group'>
     <div class='accordion-heading'> Group 1 </div>
     <div class='accordion-body'>
          <div class='accordion-inner'> 
              <div class='element'>No items here</div> 
          </div>
     </div>
</div>

我必須點擊'accordion-heading'類才能顯示'accordion-body'並進入accordion-inner項目

Answer 1

您需要綁定到手風琴元素上的show事件並在那里執行檢查，從我假設您使用Bootstrap v2.3.2開始：

$('.accordion .collapse').on('show', function () {
    var $inner = $(this).find('.accordion-inner');
    if($inner.is(':empty')){
        $inner.html('No items here');
    }   
});

演示小提琴

請注意:empty選擇器非常挑剔，如果.accordion-inner的開始和結束標記之間有任何空格，它將無法工作。

您也可以使用if(!$.trim($inner.html()))來檢查元素是否為空或者@JL建議檢查子元素的長度，只要注意文本節點不被視為子節點，所以只有文本的div將被視為空

Answer 2

你有安裝jQuery嗎？ 你可以檢查<div>是否有這樣的孩子：

if ($('#divId').children().length == 0) {
     $('#divId').append("no items here");
}

如果你沒有jQuery：

if (!document.getElementById('divId').hasChildNodes()) {
    document.getElementById('divId').innerHTML = "no items here";
}

根據你的編輯，我認為我們正在檢查兒童的accordian-inner 。 如果是這樣，請給它一個ID並將其替換為我們的代碼。 注意：您不需要<div>來包含我們的“無項目”消息...消息將使用javascript打印（另外，如果您有<div>那么，那么您實際上已經添加了一個孩子並且消息不再適用）。 將您的HTML更改為：

<div class='accordion-group'>
     <div class='accordion-heading'> Group 1 </div>
     <div class='accordion-body'>
          <div id='innerId' class='accordion-inner'> 
              <!-- Remove the 'element' div -->
          </div>
     </div>
</div>

然后：

if (!document.getElementById('innerId').hasChildNodes()) {
    document.getElementById('innerId').innerHTML = "no items here";
}