html - 我希望我的下拉菜单在单击链接而不是悬停时出现

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

您可以在 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>

编辑:

这里还有另一个子链接下拉的例子

    $(".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>