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”中的randowm字。

我尝试过标准点击方法，但对动态内容唯一有效的方法似乎是使用下面这行代码。

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

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

我的小提琴在这里：

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

我现在要做的是......例如..我点击其中一个......就像“沃尔沃”......它会显示底层的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;
}

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

1 个答案: