Как отобразить выпадающий список после нажатия только на каретку?

Question

В этой кнопке / портлете есть один HTML-дизайн. У меня есть одна fa-Caret, после нажатия на эту каретку должен отобразиться раскрывающийся список (который по умолчанию скрыт) * ​​1001 *

Я написал код 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

Событие клика, вызванное тегом «привязка».Также вы можете использовать встроенное свойство '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>

Answer 2

Примечание: - Вам нужно добавить класс 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>