無法捕獲隱藏輸入下拉菜單上的點擊事件

我正在使用下拉菜單，它使用隱藏複選框和：focus來顯示選項。無法捕獲隱藏輸入下拉菜單上的點擊事件

我不知道如何將點擊事件綁定到它。

/* 
 
* 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');    
});

不幸的是，沒有喲。我能做什麼？

來源

2016-09-13 Kolby

好吧，我想我誤解了你的問題。我將刪除我的答案並深入查看您的HTML。 –

如果您使用重點打造的下拉列表中，或許觸發同樣的焦點的事件將是一個適當的解決方案：

$(document).ready(function() { 

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

});

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

來源

2016-09-13 18:00:28 Santi

試試這個：

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

來源

2016-09-13 17:55:45 Aldo

[Fiddle]（https://jsfiddle.net/313p7o95/）。 –

當我第一次點擊下拉列表時，我需要得到一個喲。不是在選擇一個選項時。 – Kolby

嗯，請嘗試使用JQuery's focus而不是Click事件。

根據你在做什麼，它可能會更好。

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

來源

2016-09-13 17:59:18 Gauched

無法捕獲隱藏輸入下拉菜單上的點擊事件

回答

相關問題