我有一个通过 d3.append
函数添加到页面的 li
元素列表。
我希望每个 li
都有一个带有下拉列表的按钮,显示一些选项。
我正在使用 d3 添加下拉菜单,如下所示:
var innerUl = li.append("ul")
.attr("class","dropdown-menu");
innerUl.selectAll("li")
.data(function(d) { return d.style_aliases; })
.enter()
.append("li").html(function(d) { return d; });
但是,当单击下拉按钮时,没有任何反应。但我可以在元素检查器中看到添加的下拉列表 ul
。
我想做的事情的 jsfiddle 在这里:
https://jsfiddle.net/mofoyoda/dcy4xb7j/1/
请帮助我显示每个按钮的下拉菜单。
最佳答案
您的问题似乎可以通过不将按钮放置在其自己的范围内来解决
li.append("button")
.attr("class", "btn btn-default dropdown-toggle btn-layerstyle")
.attr("data-toggle", "dropdown")
.attr("aria-haspopup", "true")
.attr("aria-expanded", "false")
.html("Style: ") //default style name should be concatenated here
.append("span")
.attr("class","caret");
该按钮和相关的下拉列表似乎需要位于同一父元素中。下拉列表位于错误的位置,但这应该是一个需要修复的简单 CSS 问题。或者,确保按钮和下拉列表位于 span
内可能会产生相同的效果。
您可以在一个语句中顺便设置多个 attr 值
li.append("button")
.attr({
"class": "btn btn-default dropdown-toggle btn-layerstyle",
"data-toggle": "dropdown",
"aria-haspopup": "true",
"aria-expanded":"false"})
.html("Style: ") //default style name should be concatenated here
.append("span")
.attr("class","caret");
关于javascript - 如何将 Bootstrap 下拉列表添加到列表元素内的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31431386/