时间戳

首页 > 解决方案 > 仅单击插入符号后如何显示下拉列表？

javascript - 仅单击插入符号后如何显示下拉列表？

问题描述

我在那个按钮/Portlet 中有一个 HTML 设计。我有一个 fa fa-Caret，单击该插入符后，它应该显示下拉列表（默认情况下隐藏）

我已经编写了一个 Jquery 代码来删除该下拉列表的隐藏类，但它不能正常工作。

$(".Caret").click(function () {
  if ($(".dropdown-menu").hasClass("hidden"))
    $(".dropdown-menu").removeClass("hidden");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i id="carett" class="fa fa-caret-down pull-right hidden Caret"></i > ' + ButtonName + '</a >
  <ul id="ddlist1" class="dropdown-menu hidden">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</li>

每当我单击该按钮的插入符号时，只有该下拉列表必须出现，并且如果我切换到另一个按钮的插入符号（我没有提到的第二个按钮）必须出现下拉列表，我有一个静态下拉列表，但我正在添加进入按钮数量（动态生成）

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

从“锚”标签触发的点击事件。您也可以使用内联样式的“显示”属性。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i id="carett" class="fa fa-caret-down pull-right hidden Caret"></i > ' + ButtonName + '</a >
  <ul id="ddlist1" class="dropdown-menu" style="display:none">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</li>

<script>
$(".dropdown-toggle").click(function () {
  if ($(".dropdown-menu").css("display") == "none")
    $(".dropdown-menu").css("display", "block");
});
</script>

推荐阅读