Question

我有一个初始状态为display：none的下拉菜单。我使用toggleClass事件添加了一个带有display：block的类，这样当点击按钮时，下拉菜单就会出现并消失。

toggleClass用于添加类，但是当再次单击该按钮时，它不会删除该类。当我查看我的“检查元素”时在浏览器中的工具，你可以看到类＆＃34;活跃＆＃34;被添加，但在随后的点击，＆＃34;活跃＆＃34;留在div上。这些课程仍然闪现，好像它认识到它应该在点击上做某事，但是没有删除＆＃34;活跃的＆＃34;类。

相关代码如下。你不应该需要css，因为jquery是不起作用的，但是我把它包括在内作为参考。

    <div class="dropdown">
      <a class="dropbtn" id="button-services"><h4 class="button-arrow down-arrow">Service</h4></a>
      <div class="dropdown-content" id="dropdown-services">
        <a href="ourwork-advertising.php">Advertising</a>
        <a href="ourwork-environmental.php">Environmental</a>
        <a href="ourwork-interactive.php">Interactive</a>
        <a href="ourwork-logos.php">Logo</a>
        <a href="ourwork-packaging.php">Packaging</a>
        <a href="ourwork-print.php">Print</a>
      </div>
    </div>


.dropdown-content {
   display: none; }

.active{
   display: block; }


$('#button-services').click(function () {
    $('#dropdown-services').toggleClass("active");

});

Answer 1

确实如此 - 见下文。但我怀疑您的描述是多次附加click个事件处理程序。在某些时候，它们甚至会被解雇 - 这会删除并添加课程。附加click事件处理程序的代码在哪里？

＆＃13;

$('#button-services').click(function () {
    $('#dropdown-services').toggleClass("active");
    return false;
});

＆＃13;

.dropdown-content 
{
   display: none; 
}

.active
{
   display: block; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
      <a class="dropbtn" id="button-services"><h4 class="button-arrow down-arrow">Service</h4></a>
      <div class="dropdown-content" id="dropdown-services">
        <a href="ourwork-advertising.php">Advertising</a>
        <a href="ourwork-environmental.php">Environmental</a>
        <a href="ourwork-interactive.php">Interactive</a>
        <a href="ourwork-logos.php">Logo</a>
        <a href="ourwork-packaging.php">Packaging</a>
        <a href="ourwork-print.php">Print</a>
      </div>
    </div>

＆＃13;

Answer 2

如果你点击后返回false它对我有效如果你点击后返回false它适合我 $（'＃button-services'）。click（function（）{ $（ '＃下拉菜单服务'）toggleClass（ “活动”）。返回false; }）;

为什么我的toggleClass事件会添加该类，但不会在后续点击中删除它？

2 个答案: