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

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

2 个答案: