下拉菜单不会像按钮那样切换和类似

Question

我正在动态创建一个bootstrap下拉菜单。最初，它看起来像下拉菜单，但在第一次点击后，它明显变为按钮，同时像下拉菜单，即按钮点击我可以看到下拉选项。这是我的HTML。

<div class="dropdown" id="ApplicationNames" style="visibility: hidden">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Select Application
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="Appdropdown"></ul>
</div>

这是我的jquery。

 $('.dropdown-menu-left a').click(function () {
    var dropdownMenuItems = "School,College";
    var arrdropdownMenuItems = dropdownMenuItems.split(',');
    var dropdownMenuhtml = ''
    for (var i = 0; i < arrdropdownMenuItems.length; i++) {
        dropdownMenuhtml += '<li><a href="#">' + arrdropdownMenuItems[i] + '</a></li>';
    }
    $('#ApplicationNames').css("visibility", "visible");
    $('#Appdropdown').append(dropdownMenuhtml);
});

这里错过了在选择后显示下拉菜单而不是按钮的内容。请帮忙。

Answer 1

 	$('.dropdown-menu-left a').click(function () {
var dropdownMenuItems = "School,College";
var arrdropdownMenuItems = dropdownMenuItems.split(',');
var dropdownMenuhtml = ''
for (var i = 0; i < arrdropdownMenuItems.length; i++) {
	dropdownMenuhtml += '<a href="#">' + arrdropdownMenuItems[i] + '</a>';
}
console.log(dropdownMenuhtml);
$('#ApplicationNames').css("visibility", "visible");
	
if($('#Appdropdown').html() == ""){
	$('#Appdropdown').html(dropdownMenuhtml);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

<div class="dropdown-menu-left"><a href="#">Click me</a>
	
<div class="btn-group" id="ApplicationNames" style="visibility: hidden">
  <button type="button" id="dropdownMenuButton" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu" id="Appdropdown" aria-labelledby="dropdownMenuButton"></div>
</div>