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