javascript - 如何在 jQuery/Javascript 中固定/取消固定下拉菜单？

Question

我想创建一个按钮，允许我固定下拉菜单，使其永久可见，然后在第二次单击后取消固定。 jQuery toggle() 不起作用，因为它只是隐藏下拉菜单，与更改 css 显示属性相同。

这是我的 jsfiddle: https://jsfiddle.net/39ykn4vw/

html&css:

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <button class="pin">
      pin
    </button>
  </div>
</div>

.pin {
  position: absolute;
  left: 5px;
  top: 5px;
}

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

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #cccccc;
    min-width: 160px;
    min-height: 300px;
    z-index: 1;
}

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

Answer 1

使用额外的类来检测固定元素:

.pin {
  position: absolute;
  left: 5px;
  top: 5px;
}

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

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #cccccc;
    min-width: 160px;
    min-height: 300px;
    z-index: 1;
}


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <button class="pin" onClick="$(this).parent().toggleClass('pinned')">
      pin
    </button>
  </div>
</div>