Twitter Bootstrap手风琴功能

Twitter Bootstrap accordion feature

本文关键字：功能 手风琴 Bootstrap Twitter      更新时间：2023-09-26

使用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 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项目

您需要绑定到手风琴元素上的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将被视为空

您安装了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";
}
相关文章：