が</p> <p>..私はそう私と一緒に負担してくださいこれに新しいです、ブートストラップ

Question

に動的なネストされたドロップダウンリストを表示し、私は別の解決策を試してみましたが、私は右の作業必要なものを得るためにしないでください。データのマイリストは

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>'); 
     } 
    }); 
} 

このコードでJSONファイルから読み込まれた後、私はそれがこれを使用して表示します。..

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

..私は、標準的なクリックの方法を試してみましたが、動的なコンテンツに働くだろう唯一のものは、以下のコード行を使用してのようです本当に私のバイオリンはここにある何

切り替える：

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

私は今そこに何をしたいかは...のためにということです例..私は、 "Volvo"のようなliの1つをクリックします。それは下にある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; 
}