javascript - 如何将 Bootstrap 下拉列表添加到列表元素内的按钮

Question

我有一个通过 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/

请帮助我显示每个按钮的下拉菜单。

Answer 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");