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

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

Twitter Bootstrap手风琴功能

2 个答案: