[英]Twitter Bootstrap accordion feature
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. 使用Bootstrap和JavaScript,我将它用作手风琴格式 - 一旦点击折叠的div
,它将打开并根据id显示div
的项目。
Problem: 问题:
If the div
doesn't contain any items i want it to open and show a message to the user: 如果div
不包含我想要打开的任何项目并向用户显示消息:
"no items here"
How do I go about doing that? 我该怎么做呢? In the JavaScript ? 在JavaScript中?
This is what I have: 这就是我所拥有的:
View 视图
<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>
If the Children
are 0
i want it to open and have this text show: No items here
如果Children
是0
我希望它打开并让这个文字显示: No items here
Javascript: 使用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. 不确定我是否遗漏了别的东西要分享 - 让我知道。
UPDATE UPDATE
Div Layout: 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>
I have to click on the 'accordion-heading' class in order to display the 'accordion-body' and get into the accordion-inner
items 我必须点击'accordion-heading'类才能显示'accordion-body'并进入accordion-inner
项目
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: 您需要绑定到手风琴元素上的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');
}
});
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
. 请注意:empty
选择器非常挑剔,如果.accordion-inner
的开始和结束标记之间有任何空格,它将无法工作。
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 您也可以使用if(!$.trim($inner.html()))
来检查元素是否为空或者@JL建议检查子元素的长度,只要注意文本节点不被视为子节点,所以只有文本的div将被视为空
Do you have jQuery installed? 你有安装jQuery吗? You can check if a <div>
has children like this: 你可以检查<div>
是否有这样的孩子:
if ($('#divId').children().length == 0) {
$('#divId').append("no items here");
}
If you don't have jQuery: 如果你没有jQuery:
if (!document.getElementById('divId').hasChildNodes()) {
document.getElementById('divId').innerHTML = "no items here";
}
Based on your edit, I think we're inspecting accordian-inner
for children. 根据你的编辑,我认为我们正在检查儿童的accordian-inner
。 If so, give it an ID and substitute that into our code. 如果是这样,请给它一个ID并将其替换为我们的代码。 Note: You don't need a <div>
to contain our "no items" message...the message will get printed with javascript (Plus, if you have a <div>
there, then you've in effect added a child and the message no longer applies). 注意:您不需要<div>
来包含我们的“无项目”消息...消息将使用javascript打印(另外,如果您有<div>
那么,那么您实际上已经添加了一个孩子并且消息不再适用)。 Change your HTML to this: 将您的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>
Then: 然后:
if (!document.getElementById('innerId').hasChildNodes()) {
document.getElementById('innerId').innerHTML = "no items here";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.