Question

我在HTML上使用的jQuery代码无效。我希望点击“dropbtn”来显示它的隐藏内容而不是悬停在上面。我尝试删除CSS上的所有“悬停”效果，但jQuery代码仍然无法正常工作。除了这个代码之外，jQuery在其他代码上运行良好。我该如何解决这个问题？

Answer 1

您的jQuery代码几乎是正确的，您只是错过了类选择器上的.前缀。

要使样式以相同的方式工作，您只需从CSS中删除:hover规则，然后使用类切换器切换.dropbtn元素的连续点击。在下面的示例中，我使用了active。试试这个：

$(document).ready(function() {
  $(".dropbtn").click(function() {
    $(this).toggleClass('active');
    $(".dropdown-content").toggle();
  });
});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  width: 115px;
  height: 28px;
  border: solid 1px #cebbb1;
  background-color: white;
  color: #897f63;
  margin-left: -5px;
  position: relative;
  cursor: pointer;
}

.dropbtn.active {
  border: solid 1px #0093dc;
  color: #0093dc;
}

#mainspan {
  font-weight: bold;
  position: absolute;
  padding-left: 7px;
  padding-top: 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  z-index: 1;
  border: solid 1px #cebbb1;
  width: 170px;
  margin-left: -5px;
}

.dropdown-content a {
  padding: 1px 14px;
  display: block;
  color: #897f63;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  text-decoration: none;
  color: #897f63;
}

<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="DROPDOWN.css">
</head>
<body>
  <div class="dropdown">
    <div class="dropbtn">
      <span id="mainspan">main</span>
    </div>
    <div class="dropdown-content">
      <a href="#">item 1</a>
      <a href="#">item 2</a>
    </div>
  </div>
  <script type='text/javascript' src="DROPDOWN.js"></script>
</body>
</html>

Answer 2

要在JQuery中引用类，您需要在类名前包含.：

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

如何使用jQuery将此元素从悬停更改为单击效果？

2 个答案: