twitter-bootstrap 带 ajax 的引导加载折叠面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21337393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap load collapse panel with ajax
提问by netcult
I'm trying to load collapsable panels with ajax. I got it working, but my trigger fires on the a tag, so the ajax script is called when you open AND close the panel. It should not load it when you close the panel, this is overload..
我正在尝试使用 ajax 加载可折叠面板。我让它工作了，但是我的触发器在 a 标签上触发，所以当你打开和关闭面板时会调用 ajax 脚本。当你关闭面板时它不应该加载它，这是过载..
My code:
我的代码：
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">First panel</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Second panel</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
The javascript:
javascript：
$('#accordion a').click(function () {
var collapse_element = event.target;
alert(collapse_element);
var href = this.hash;
var depId = href.replace("#collapse","");
var dataString = 'depId='+ depId + '&do=getDepUsers';
$.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
$('#depUsers'+depId).html(data);
});
})
The ajax script returns the content of the div. So, it works, but I'm looking for the correct way to fire the ajax load trigger... i think I need to use the "show.bs.collapse" event, but can't find out how to use this on a panel which contains more than one dynamic panel (with its own ID).
ajax 脚本返回 div 的内容。所以，它有效，但我正在寻找触发 ajax 加载触发器的正确方法......我想我需要使用“show.bs.collapse”事件，但无法找到如何使用它包含多个动态面板（具有自己的 ID）的面板。
Thanks for your help!
谢谢你的帮助！
M.
M。
采纳答案by netcult
I kind of solved it by adding a "open" class when loaded with data, and removing that same class if clicked when opened:
我通过在加载数据时添加一个“打开”类来解决它，并在打开时单击删除相同的类：
$('#accordion a').click(function () {
if($(this).hasClass("panelisopen")){
$(this).removeClass("panelisopen");
} else {
var href = this.hash;
var depId = href.replace("#collapse","");
$(this).addClass("panelisopen");
var dataString = 'depId='+ depId + '&dep=1&do=getDepUsers';
$.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
$('#depUsers'+depId).html(data);
});
}
});
Not the best solution I guess, but it works.
我猜不是最好的解决方案，但它有效。
回答by SQL
You can try this:
你可以试试这个：
$('#accordion').on('show.bs.collapse', function(e){
var depId = $(e.target).attr('id').replace('collapse','');
...
});
回答by Ahmed Samir Shahin
I think instead of depending on element ID, and polluting it with numbers and do the string replacement and so, you can make use of dataattributes:
我认为，而不是依赖于元素 ID，并用数字污染它并进行字符串替换等，您可以使用data属性：
<div class='collapse' data-dep-id="1" />
Then in JS:
然后在JS中：
var $elementId = $(e.target).data('dep-id')
And the same applies for Ajax URL and other attributes if needed.
如果需要，这同样适用于 Ajax URL 和其他属性。
