javascript - 在 Bootstrap 中显示动态嵌套下拉列表

Question

我是新手，所以请耐心等待..

我尝试了不同的解决方案，但我没有得到我需要的工作正常。我的数据列表是使用以下代码从 JSON 文件读取的

function showInsatserList() {
    var promise = [];
    promise = getSelectedSubareaInsatslist();
    promise.done(function (insatserlist) {
        $('#dropdownmenu li').remove();
        for (var i in insatserlist) {
            $('#dropdownmenu').append('<li class="dropdown-submenu"><a href="#">' + insatserlist[i].title + '</a> '
                + '<ul class="dropdown-menu"><li>HEJ</li></ul></li>');
        }
    });
}

然后我用这个来展示它..

$('.insatsDropdown').on('click', function (e) {
    showInsatserList();
});

现在我的 html 看起来像这样......

  <div class="dropdown insatsDropdown">
      <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">Välj insatser <span class="caret"></span></a>
      <ul id="dropdownmenu" class="dropdown-menu"></ul>
  </div>

我想要做的是，当我单击下拉菜单中的任何一个 li 时，它只会显示底层子菜单，该子菜单目前仅填充瑞典语“HEJ”中的随机单词。

我尝试了标准的点击方法，但唯一适用于动态内容的方法似乎是使用下面的这行代码..

$(document).on('click', '.dropdown-submenu', function (e) {
    $(this).find('ul').toggle(); //not working
});

问题是..我在里面所做的并没有真正切换任何东西

我的 fiddle 在这里:

https://jsfiddle.net/MissKalani/yvrL24Lv/9/

我现在想做的是..例如..我点击其中一个li..比如“Volvo”..它将显示底层的ul元素。

我也对不同的方法持开放态度。我尝试在单击时添加 ul 元素，但这对我来说还不起作用。

Answer 1

您必须添加一些额外的样式(下面的代码)才能在悬停时显示嵌套列表。请参阅https://jsfiddle.net/yvrL24Lv/10/

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}