Показать динамические вложенные списки выпадающих в загрузчике

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> 

Что я хочу сделать, так это то, что когда я нажимаю на любой из ли из выпадающего меню, он будет показывать только базовое подменю, которое на данный момент заполнено просто словом randowm в шведском «HEJ».

Я попробовал стандартные методы щелчка, но единственное, что будет работать над динамическим контентом, кажется, с помощью этой строки кода ниже ..

$(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; 
}