я хочу, чтобы раскрывающийся список отображался при щелчке ссылки вместо

Question

В моем коде есть кнопка ссылки и выпадающий список. сейчас при наведении указывается выпадающий список, но я хочу, чтобы он работал при нажатии на ссылку. Ребята, пожалуйста, помогите мне. Заранее спасибо

, когда я попытался сделать это за клик, страница перезагружается, и раскрывающийся список не отображается.

.dropbtn {
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  color: black;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 30px;
  background-color: white;
  color: black;
  max-height: 200px;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0px;
  list-style-type: none;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 200;
}

.color {
  color: black;
}

.dropdown-content li a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #2864DC;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #2864DC;
}

<div class="dropdown">
  <asp:linkbutton type="button" class="dropbtn" runat="server" CausesValidation="false" cssclass="MenuItem">
    <img alt="WorkFlow" class="MenuIcon" src="Assets/img/Reports.png" />
    <asp:label ID="Label1" runat="server" Text="Reports" />
  </asp:linkbutton>

  <ul class="dropdown-content">
    <li><a href="OEEReport.aspx" class="color">OEE</a></li>
    <li><a href="AvailabilityReportNew.aspx" class="color">Availability</a></li>
    <li> <a href="PerformanceReport.aspx" class="color">Performance</a>
      <ul>
        <li><a class="color">qwerty</a></li>
      </ul>
    </li>
    <li><a href="ProcessParameterReport.aspx" class="color">Energy</a></li>
  </ul>
</div>

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

фактический результат: раскрывающийся список появляется при наведении курсора

Answer 1

Вы можете использовать функцию .toggle () в jQuery, чтобы показать / скрыть элемент внутри события click и удалить класс CSS, который показывает .dropdown-content при наведении курсора

проверить этот код, который я сделал с jQuery

$(".dropdown").click(function(){
  $(".dropdown-content",this).toggle();
});

 .dropbtn  {

  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  color:black;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top:30px;
  background-color: white;
  color:black;
   max-height: 200px;
    overflow: scroll;
    overflow-y:auto;
    overflow-x: hidden;
    margin-top: 0px;
  list-style-type: none;

  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 200;
}
.color{
    color:black;
}
.dropdown-content li a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #2864DC;
                           color:white;
}

/*.dropdown:hover .dropdown-content {display: block;}*/

.dropdown:hover .dropbtn {background-color: #2864DC;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">DropDown
  <ul class="dropdown-content"  >
  <li><a href="abc.aspx" class="color">abc</a></li>
  <li><a href="xyz.aspx" class="color">xyz</a></li>
  <li> <a href="mno.aspx" class="color">mno</a>
    <ul >
      <li><a class="color" >qwerty</a></li>
    </ul>
  </li>
  <li><a href="pqr.aspx" class="color">pqr</a></li>
  </ul>
</div>

Редактировать:

Также приведен еще один пример с раскрывающимся списком под-ссылки

    $(".dropdown").click(function(){
      $(".dropdown-content",this).toggle();
      return false;
    });

     .dropbtn  {

      padding: 16px;
      font-size: 16px;
      border: none;
    }

    .dropdown {
      position: relative;
      color:black;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      top:30px;
      background-color: white;
      color:black;
       max-height: 200px;
        overflow: scroll;
        overflow-y:auto;
        overflow-x: hidden;
        margin-top: 0px;
      list-style-type: none;

      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 200;
    }
    .color{
        color:black;
    }
    .dropdown-content li a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #2864DC;
                               color:white;
    }

    /*.dropdown:hover .dropdown-content {display: block;}*/

    .dropdown:hover .dropbtn {background-color: #2864DC;}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>DropDown
      <ul>
      <li><a href="abc.aspx" class="color">abc</a></li>
      <li><a href="xyz.aspx" class="color">xyz</a></li>
      <li class="dropdown"> <a href="mno.aspx" class="color">mno</a>
        <ul class="dropdown-content">
          <li><a class="color" >qwerty</a></li>
        </ul>
      </li>
      <li><a href="pqr.aspx" class="color">pqr</a></li>
      </ul>
    </div>

Answer 2

Вы можете легко использовать этот выпадающий список начальной загрузки.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>