我一直在努力计算出 demo at this site . 我有问题。 这是代码:
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".heading").click(function() {
jQuery(this).next(".content").slideToggle(500);
});
});
var el = document.createElement('div');
el.className = "heading";
el.innerHTML = "whatever you want";
$('.listResults').append(el);
var el2 = document.createElement('div');
el2.className = "content";
el2.innerHTML = "whatever you want shown";
$('.listResults').append(el2);
jQuery(".content").hide();
HTML 有一个名为 listResults
的 div 类,所有内容都附加到该类中。目前 javascript 在加载后运行,所以我在 .content
生成后调用 jQuery.hide
。
问题是,当我单击其中一个标题 div 时,它不会下拉内容。有什么想法吗?
最佳答案
试试这个
$('.listResults').on('click', '.heading', function(){
// whatever you want
});
var el = $('<div/>', {
'class' : 'heading',
'html' : 'whatever you want'
});
$('.listResults').append(el);
或者你也可以试试这个
var el = $('<div/>', {
'class' : 'heading',
'html' : 'whatever you want',
'click' : function(){
// whatever you want, you can use $(this)
}
});
$('.listResults').append(el);
更新:这将为每个 div 创建单独的事件处理程序,并且会消耗更多内存,因此不推荐这样做,但如果您有几个 div 则可以使用。
关于javascript - 带有 jQuery 的动态 div,在点击时显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15057555/