如何在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> 

Answer 2

如果不是css屬性，則可以通過以下鏈接訪問： http : //webpop.github.io/jquery.pin/#link-three