我希望单击链接而不是将鼠标悬停时显示我的下拉菜单

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

您可以轻松使用此引导程序下拉列表。

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

Answer 2

您可以在jQuery上使用.toggle（）函数来显示/隐藏事件单击内的元素并删除显示悬停时显示.dropdown-content的CSS类

检查我使用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>