Question

该按钮/ Portlet中有一个HTML设计。我有一个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>

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

Answer 1

注意：-您需要添加span类，并且可以在span类内部编写<i>并在<span>标签上添加切换类来解决此问题。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="dropdown">
  <span  class="btn dropdown-toggle" data-toggle="dropdown">
  </span>
  <ul id="ddlist1" class="dropdown-menu hidden">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</div>

Answer 2

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

<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>

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

2 个答案: