Question

我正在使用一个隐藏式复选框和下拉菜单的下拉列表：焦点显示选项。

我无法弄清楚如何将click事件绑定到它。

/* 
 * Dropdown menu for Design it & Code it
 * http://designitcodeit.com/i/19
 */

              html {
  background: #fff url(http://designitcodeit.com/live/NBTXyIkXIpw4/img/bg.png);
  font-size: 75%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  margin: 110px auto 0 auto;
  width: 100%;
  max-width: 260px;
  text-align: center;
}

a {
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #333;
  text-shadow: 0 1px #fff;
}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background: #e8e8e8;
}


.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

.dropdown-toggle:focus ~ .dropdown-text {
  box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>

<div class="dropdown">
  <input class="dropdown-toggle" type="text">
  <div class="dropdown-text">Account</div>
  <ul class="dropdown-content">
    <li><a href="#">Settings</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Log out</a></li>
  </ul>
</div>

以下是我试图捕捉事件的几种不同方式。

$('.dropdown').click(function(){
  alert('yo');            
});

$('.dropdown-toggle').click(function(){
  alert('yo');            
});

$('.dropdown').change(function(){
  alert('yo');            
});

可悲的是，没有哟。我该怎么办？

Answer 1

嗯，请尝试使用JQuery's focus而不是点击事件。

根据您正在做的事情，它可能会更好。

$(".dropdown-toggle").focus(function() {

Answer 2

如果您正在使用焦点来构建下拉列表，那么在相同焦点上触发事件可能是一个合适的解决方案：

$(document).ready(function() {

  $(".dropdown-toggle").focus(function() {
    alert("Yo!");
  });

});

工作码本：https://codepen.io/anon/pen/wzrxJP

Answer 3

试试这个：

$('.dropdown-content a').click(function(ev){
  ev.preventDefault();
  alert('yo');            
});

无法捕获隐藏输入下拉列表上的单击事件

3 个答案: