jQuery click（）不起作用

Question

我試圖從最近看到的tut做出下拉菜單。它被設計成與hover()一起工作，但我希望它在點擊事件。當我改變它就像它不再工作。

這裏是它的jsfiddle：https://jsfiddle.net/Manny5980/bm0mmo0x/

附：不要介意無反應。我會整理一下。 :)

Answer 1

哈弗可能需要兩個參數，而點擊只能帶一個。

哈弗

$(".a").hover(hoverIn(), hoverOut()); 

點擊

$(".a").click(whatHappensWhenYouClick()); 

這應該顯示在下拉菜單中，但它不會將其拉起，可嘗試使用toggleClass（）的下拉列表之間進行切換，並拉起狀態。

$(document).ready(function() { 
    $('.dropdown').click(function(){ 
     $(this).children('.options').slideDown(200); 
    }); 
}); 

Answer 2

.click()接受一個回調函數，你有他們兩個。這樣做：

$(document).ready(function() { 
    $('.dropdown').click(
    function() { 
     $(this).children('.options').slideToggle(200); 
    } 
); 
}); 

小提琴：https://jsfiddle.net/bm0mmo0x/4/

Answer 3

在點擊的slideToggle。

$(document).ready(function() { 
 
    $('.dropdown').click(function() { 
 
     $(this).children('.options').slideToggle(200); 
 
    }); 
 
});

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-image: url(images/bg-img.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
nav { 
 
    position: fixed; 
 
    height: 70px; 
 
    width: 100%; 
 
    background-color: #D1DBBD; 
 
    padding: 10px; 
 
} 
 

 
nav ul { 
 
    position: relative; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    background-color: #193441; 
 
    border-radius: 5px; 
 
    bottom: -20px; 
 
    left: 440px; 
 
    font-family: Verdana; 
 
    font-weight: bold; 
 
} 
 

 
.dropdown:hover { 
 
    background-color: #91AA9D; 
 
} 
 

 
nav li ul { 
 
    background-color: #91AA9D; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 40px; 
 
    width: 140px; 
 
} 
 

 
nav li:hover { 
 
    background-color: #193441; 
 
    color: black; 
 
} 
 

 

 
nav li li { 
 
    position: relative; 
 
    margin: 0; 
 
    display: block; 
 
} 
 

 
nav li li ul { 
 
    position:absolute; 
 
    top:0; 
 
    left:200px; 
 
    margin:0; 
 
} 
 

 
nav a { 
 
    line-height:40px; 
 
    padding:0 12px; 
 
    margin:0 12px; 
 
    color:#fff; 
 
    text-decoration:none; 
 
    display:block; 
 
} 
 

 
nav li li a { 
 
    border-bottom:solid 1px #193441; 
 
    margin:0 10px; 
 
    padding:0; 
 
} 
 
nav li li:last-child a {border-bottom:none;} 
 

 
.options { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
     <li class="dropdown"><a href="#">Клавиатури</a> 
 
     <ul class="options"> 
 
      <li><a href="#">SteelSeries</a></li> 
 
      <li><a href="#">Razer</a></li> 
 
      <li><a href="#">Logitech</a></li> 
 
      <li><a href="#">Hama</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Мишки</a></li>

如果您需要多個下拉菜單，你可以添加此。

$(document).ready(function() { 
 
    $('.dropdown').click(function() { 
 
    \t \t $('.dropdown').children('.options').slideUp(200); 
 
     $(this).children('.options').slideToggle(200); 
 
    }); 
 
});

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-image: url(images/bg-img.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
nav { 
 
    position: fixed; 
 
    height: 70px; 
 
    width: 100%; 
 
    background-color: #D1DBBD; 
 
    padding: 10px; 
 
} 
 

 
nav ul { 
 
    position: relative; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    background-color: #193441; 
 
    border-radius: 5px; 
 
    bottom: -20px; 
 
    left: 440px; 
 
    font-family: Verdana; 
 
    font-weight: bold; 
 
} 
 

 
.dropdown:hover { 
 
    background-color: #91AA9D; 
 
} 
 

 
nav li ul { 
 
    background-color: #91AA9D; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 40px; 
 
    width: 140px; 
 
} 
 

 
nav li:hover { 
 
    background-color: #193441; 
 
    color: black; 
 
} 
 

 

 
nav li li { 
 
    position: relative; 
 
    margin: 0; 
 
    display: block; 
 
} 
 

 
nav li li ul { 
 
    position:absolute; 
 
    top:0; 
 
    left:200px; 
 
    margin:0; 
 
} 
 

 
nav a { 
 
    line-height:40px; 
 
    padding:0 12px; 
 
    margin:0 12px; 
 
    color:#fff; 
 
    text-decoration:none; 
 
    display:block; 
 
} 
 

 
nav li li a { 
 
    border-bottom:solid 1px #193441; 
 
    margin:0 10px; 
 
    padding:0; 
 
} 
 
nav li li:last-child a {border-bottom:none;} 
 

 
.options { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
     <li class="dropdown"><a href="#">Клавиатури</a> 
 
     <ul class="options"> 
 
      <li><a href="#">SteelSeries</a></li> 
 
      <li><a href="#">Razer</a></li> 
 
      <li><a href="#">Logitech</a></li> 
 
      <li><a href="#">Hama</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Мишки</a> 
 
     <ul class="options"> 
 
      <li><a href="#">SteelSeries</a></li> 
 
      <li><a href="#">Razer</a></li> 
 
      <li><a href="#">Logitech</a></li> 
 
      <li><a href="#">Hama</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#">Слушалки</a></li> 
 
     <li class="dropdown"><a href="#">Падове</a></li> 
 
     <li class="dropdown"><a href="#">Gaming Packs</a></li> 
 
    </ul> 
 
    </nav>

Answer 4

代替click使用on方法更有效，你可以通過on方法傳遞任何事件處理程序。查看片段。

你可以使用這樣的：

$(document).ready(function() { 
    $('.dropdown').on('click', function(){ 
    $(this).children('.options').slideToggle(200); 
    }); 
}); 

https://jsfiddle.net/bm0mmo0x/6/