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;                  
                }

不确定我是否缺少其他要分享的内容 - 请告诉我。

更新

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-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');
    }   
});

Demo fiddle

注意: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";
}