在我的应用程序中,我将一个 div (html) 列表附加到父 div 容器
muse_card_template = $("#mustache.muse_card").html()
html = Mustache.to_html(muse_card_template, muse.getMustacheJSON())
html = "<li class=''>" + html + "</li>"
@$('.muses_card_container').append (html)
//div to which I append my cards
.content
%ul.muses_card_container
所以基本上我只是将一个 div 列表附加到一个 div 并通过设置容器的宽度来包装它。
我的意图是在点击后展开卡片的详细内容,展开后的 View 应该显示在被点击卡片的正下方(expand inline below)。
但是目前我没有任何关于在哪里插入扩展内容的引用,因为我只有一个 div 列表。
是否有任何库可用于确定插入新 div 的位置?或者我可以做任何代码更改来完成这项工作吗?
编辑:
添加了预期结果
这样做的挑战在于,当用户单击图像时,我不知道在何处插入展开的内容。
我循环 HTML 图像卡片的代码如下:
addAll: ->
@options.muses.each(@addOne)
addOne: (muse) ->
#render corresponding muse cards
muse_card_template = $("#mustache.muse_card").html()
#html for cards are rendered via Mustach
html = Mustache.to_html(muse_card_template, muse.getMustacheJSON())
#append resulting html to 'muse_card_container' div
html = "<li class=''>" + html + "</li>"
@$('.muses_card_container').append (html)
最佳答案
我猜你已经有 jQuery 了。将单击事件处理程序附加到每个 li 元素。触发点击事件时,事件对象将包含有关点击来源的详细信息。
$(document).ready(function(){
$('li').each(function(index, element){
$(element).click(function(event){
$('#text').text($(event.target).html());
});
});
});
看看这个code snippet .单击右侧 Pane 中的数字,您将看到您单击的数字显示在下方的标签中。
关于javascript - 如何确定列表中的位置以插入 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14168482/