下拉菜单不切换且类似于按钮

Posted 2023-05-08

【中文标题】下拉菜单不切换且类似于按钮

【英文标题】：Dropdown menu not toggling and resembling like button

【发布时间】：2017-04-02 01:17:41

【问题描述】：

我正在动态创建引导下拉菜单。最初，它看起来像下拉菜单，但在第一次单击后，它明显变为按钮，而像下拉菜单一样工作，即在按钮单击时我可以看到下拉选项。这是我的 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);
);

选择后显示下拉菜单而不是按钮的内容被遗漏了。请帮忙。

【问题讨论】：

您已使用 CSS 标记问题，但未在您的问题中添加任何 CSS。它可能有助于诊断您的问题。

@Kyle 我没有使用任何内联 css。已使用 Bootstrap CSS 类。所以我标记了CSS。谢谢！

你能给我们一个sn-p来解决你的问题吗？

@Samir 我已经添加了图片。请看一下

我认为您的向下箭头在第一次点击后会被删除，对吗？

【参考方案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>

【讨论】：

请检查箭头样式。它直接来自css。

能否请您更新您的完整 HTML 和 css，特别是按钮？

箭头现在来了，但我看到我的页面中所有可用下拉菜单的双双箭头。有什么方法可以通过使用 jquery 而不是内联 CSS 的 CSS 类添加来做到这一点

@Lara，我已经添加了sn-p，请检查。

@Lara，而不是<ul>，我使用了<div>。你也可以使用<ul>。