Javascript 在引导中显示动态嵌套下拉列表

我对这件事还不熟悉，所以请容忍我

我尝试过不同的解决方案，但我不想让我需要的工作正常。我的数据列表是用以下代码从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>');
        }
    });
}

现在我的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>

问题是。。我在里面所做的并不是真的切换任何东西

我的小提琴在这里：

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

---

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

为了在悬停状态下显示嵌套列表，您必须添加一些额外的样式（下面的代码）。看

---

为了在悬停状态下显示嵌套列表，您必须添加一些额外的样式（下面的代码）。看

---

你读过

.next（）

doco了吗？它只选择兄弟姐妹，而ul不是单击的li的兄弟姐妹，它是一个子。浏览一下，我相信你会发现你应该使用的方法……你能摆好小提琴吗？那将对我们有帮助。我想你应该看看jquery

.first（）

函数。我已经设置了一个fiddle。。以某种类似的方式，除了jsondata。。但现在我似乎也无法在那里正常工作：（对不起，你读了

.next（）了吗）

doco？它只选择兄弟姐妹，而ul不是单击的li的兄弟姐妹，它是一个孩子。浏览一下，我相信你会发现你应该使用的方法…你能设置一个小提琴吗？这会对我们有帮助。我想你应该看看jquery

。first（）

函数。我已经设置了一个小提琴..除了jsondata..之外，其他方式有些类似..但现在我似乎也无法在那里正常工作：（对不起，啊，是的。谢谢。没错。现在缺少的是..我想单击..例如沃尔沃..它将显示底层子菜单..但没有这样做：（这就是你想要达到的目的吗？是的！这就是我想要的！谢谢。不过请帮个忙。如果我想用单击而不是悬停来切换呢？当我输入：active时，它似乎会打开它..但在我删除菜单后会立即关闭菜单。）pointer@Kalani，这很复杂。我想您必须使用javascript/jQuery来进行-override默认列表行为并添加一些类或模拟鼠标悬停单击。啊，是的。谢谢。没错。现在这里缺少的是..我想单击..例如Volvo..它将显示底层子菜单..但没有这样做：（这就是你想要达到的目的吗？是的！这就是我想要的！谢谢。不过请帮个忙。如果我想用单击而不是悬停来切换呢？当我输入：active时，它似乎会打开它..但在我删除菜单后会立即关闭菜单。）pointer@Kalani，这很复杂。我想您必须使用javascript/jQuery来进行-override默认列表行为并添加一些类或模拟鼠标悬停单击。

  <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>

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

.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;
}