How to pin/unpin drop down menu in jQuery/Javascript?

Question

I'd like to create a button which will allow me to pin the drop down menu so it's visible permanently, and then unpin it, after clicking on it second time. jQuery toggle() doesn't work because it just hides the drop down, same as changing css display property.

Here's my 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

Use additional class to detect pinned element:

 .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