Twitter Bootstrap手风琴功能 [英] Twitter Bootstrap accordion feature

问题描述

使用Bootstrap和JavaScript，我将其用作手风琴格式 - 一旦点击折叠的 div ，它将打开并显示<$ c $中的项目c> div 基于id。

Working with Bootstrap and JavaScript and I am using it as an accordion format - once clicked on the collapsed div it will open and show the items within the div based on the id.

问题：

如果 div 不包含我想要打开的任何项目并向用户显示消息：

If the div doesn't contain any items i want it to open and show a message to the user:

"no items here" 

我该如何做？在JavaScript中？

How do I go about doing that? In the 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>

如果儿童 0 我希望它打开并显示此文字：此处没有项目

If the Children are 0 i want it to open and have this text show: 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;                  
                }

不确定我是否遗漏了其他任何要分享的东西 - 请告诉我。

Not sure if i am missing anything else to share - let me know.

更新

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'类才能显示'手风琴身体' '并进入手风琴 - 内部项目

I have to click on the 'accordion-heading' class in order to display the 'accordion-body' and get into the accordion-inner items

推荐答案

你会需要绑定到手风琴元素上的 show 事件，并在那里执行检查，我假设你使用的是Bootstrap v2.3.2：

You'd need to bind to the show event on the accordion elements and perform your check there, from your classes I'm assuming your using 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 的开始和结束标记之间有空格，它将无效。

Note that the :empty selector is very picky, it will not work if there's any white space between the opening and closing tags of .accordion-inner.

您还可以使用 if（！$。trim（$ inner.html（）））来检查是否元素为空或@JL建议检查子元素的长度，只要注意文本节点不被视为子节点，因此只有文本的div将被视为空

You may also use if(!$.trim($inner.html())) to check if the element is empty or as @JL suggested check the length of the children elements just beware that text nodes are not treated like children, so a div with only text would be considered empty

这篇关于Twitter Bootstrap手风琴功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！