列表項上的單擊事件，沒有任何響應或控制台輸出
[英]on click event on list item not having any response or console output
問題描述
我正在嘗試使清單中的一個手風琴。
'use strict' $(document).ready(function() { var drops = $('.accords'); drops.on('click', function() { console.log(drops.length); for (i = 0; i < drops.length; i++) { $(this).toggleClass('acc'); if ($(this).hasClass('acc')) { $(this).children('.accordion').css({ 'max-height': '500px' }); } else { $(this).children('.accordion').css({ 'max-height': '0' }); } } }) });
body { position: relative; padding-top: 148px; } .header { width: 100%; z-index: 5; top: 0; padding: 17px 0 13px; max-height: 124px; background-color: $black; display: flex; position: absolute; .container { width: 100%; } .logo { float: left; } .nav-mini { display: none; } .nav { float: right; padding-top: 45px; li { padding-bottom: 45px; display: inline; padding-right: 20px; &:last-child { padding-right: 0; } } a { font-size: 14px; &:hover { background-color: $white; color: $black; } } } @include breakpoint (tablet) { .nav-desktop { display: none; } .nav-mini { display: block; } } } .nav-mini { padding-top: 26px !important; .mini-menu { float: left; margin-right: 8px; padding: 9px 15.5px; } .mini-search { float: right; padding: 9px 14px; } .mini-menu, .mini-search { border: 2px solid $white; } } .dropdown-mini { position: absolute; height: 1500px; width: 100%; top: 124px; left: 0; background-color: $white; } .lvl-one { width: 100%; height: 100%; padding-top: 33px !important; a { font-size: 16px !important; } li { display: block !important; padding: 17.5px 0 !important; border-top: 3px solid $black; font-family: $f-bold; font-size: 16px; &:last-child { border-bottom: 3px solid $black; } span { float: right; padding-right: 6px; } .accordion { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; .row { padding-top: 24px; .txt { font-size: 14px; word-spacing: 0em; line-height: 26px; margin-top: -6px; width: 99%; padding-bottom: 26px; .orange { float: none !important; } } h4 { letter-spacing: -0.09em !important; padding-bottom: 3px; } h5 { font-size: 13px !important; word-spacing: -0.2em !important; } } ul { li { border: none; padding: 7.5px 0 !important; font-size: 14px !important; &:first-child { padding-top: 0 !important; } &:hover { cursor: pointer; } a { font-size: 14px !important; } } } } } } .drop { height: 480px; width: 100%; top: 123px; background: transparent; position: absolute; z-index: 8; left: 0; .container { position: relative; width: 100%; height: 100%; .dropdown { display: none; height: 480px; width: 100%; z-index: 10; background-color: $white; top: 0; margin: 0 auto; } } } .drop-cont { padding: 56px 100px 0; display: flex; justify-content: center; } .drop-links { margin-right: 130px; width: 470px; li { padding: 15.5px 0; &:first-child { padding-top: 30px; } &:last-child { padding-bottom: 35px; } } a { font-size: 16px; font-weight: bold; } } .drop-txt { float: right; max-width: 370px; .txt { font-size: 15px; padding-top: 59px; padding-bottom: 24px; letter-spacing: -0.03em; line-height: 1.7; .orange { font-size: 19px; } } .sub { font-size: 14px; padding-bottom: 4px; } h5 { font-size: 13px; word-spacing: -0.2em; } } .drop-links, .drop-txt { border-top: 3px solid $black; border-bottom: 3px solid $black; } .dropped { background-color: $white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <header class="header"> <div class="dropdown-mini"> <div class="container"> <div class="nav lvl-one"> <ul> <li class="accords"><a href="javascript:;" class="black ">ABOUT US</a><span>v</span> <div class="accordion"> <div class="row"> <div class="col col-2-t"> <ul> <li class="accord"><a href="javascript:;">INTRODUCTION<span></span></a></li> <li class="accord"><a href="javascript:;">VISION & VALUES<span></span></a></li> <li class="accord"><a href="javascript:;">OUR STRATEGY<span></span></a></li> <li class="accord"><a href="javascript:;">BUSINESS MODEL<span></span></a></li> <li class="accord"><a href="javascript:;">LEADERSHIP TEAM<span></span></a></li> <li class="accord"><a href="javascript:;">GOVERNANCE<span></span></a></li> <li class="accord"><a href="javascript:;">HISTORY<span></span></a></li> </ul> </div> <div class="col col-2-t"> <p class="txt black"> <span class="orange">“</span>In blandit porta consequat. Phasellus orci diam, laoreet in tristique pellentesque, sodales ut diam. Maecenas et quam quis erat accumsan iaculis ac vitae dolor. Cras mattis tellus condimentum pharetra fermentum. Nulla porta risus id odio varius. <span class="orange">“</span> </p> <h4 class="sub">TERRY THAM</h4> <h5>Managing Director</h5> </div> </div> </div> </li> <li><a href="javascript:;" class="black portfolio">OUR PORTFOLIO</a><span>v</span></li> <li><a href="javascript:;" class="black">INVESTORS</a><span>v</span></li> <li><a href="javascript:;" class="black">NEWS & MEDIA</a><span>v</span></li> <li><a href="javascript:;" class="black">CONTACT</a></li> </ul> </div> </div> </div> </header> </body>
jsfiddle 鏈接
我無法工作的部分是.on(click)函數。 當我單擊ABOUT US列表元素時， .accordion應該具有一些最大高度（應該可見）。 但是如您所見，我在click事件發生后嘗試測試代碼。 在控制台中，我什么也沒得到。 不知道為什么。 可點擊項是否必須為<li>是否重要？
不知道我在做什么錯。
2 個解決方案
解決方案1
2 2018-11-20 12:48:04
我不確定我是否理解您的問題
但希望能有所幫助
$(document).ready(function(){ $(document).on('click','href',function(){ if($(this).attr("href")==="#"){ return false; } }); $(".about-span").click(function(){ $(".about-div").slideToggle(); }); });
body { position: relative; } header{ padding:10px; background-color:teal; } a{ color:#fff; } ul{ padding:0; } li{ display:inline-block; padding:2px; } .about-div{ position:absolute; display:none; padding:10px; background-color:teal; top:100%; left:0; } .about-li{ display:block; padding:5px 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <header> <ul> <li> <span class="about-span"><a href="#">ABOUT US</a></span> <div class="about-div"> <ul> <li class="about-li"><a href="#">INTRODUCTION</a></li> <li class="about-li"><a href="#">VISION & VALUES</a></li> <li class="about-li"><a href="#">OUR STRATEGY</a></li> <li class="about-li"><a href="#">BUSINESS MODEL</a></li> <li class="about-li"><a href="#">LEADERSHIP TEAM</a></li> <li class="about-li"><a href="#">GOVERNANCE</a></li> <li class="about-li"><a href="#">HISTORY</a></li> </ul> </div> </li> <li><a href="#">OUR PORTFOLIO</a></li> <li><a href="#">INVESTORS</a></li> <li><a href="#">NEWS & MEDIA</a></li> <li><a href="#">CONTACT</a></li> </ul> </header> </body>
解決方案2
1 2018-11-20 12:30:30
在JSFiddle中，默認情況下不能只使用JQuery。 您必須選擇庫。 單擊JavaScript + No-Library (pure JS)然后選擇您的庫（在您的情況下為JQuery 3.3.1 。
然后，您將在瀏覽器控制台中找到輸出。
編輯：
順便說一句，您遇到另一個錯誤。 i is not defined 。 為了解決這個問題，您只需要輸入var i; 例如下面的var drops = ...行。
這是一個選擇了JQuery並解決了所有錯誤的小提琴。
https://jsfiddle.net/y92j0thc/6/
點擊事件，沒有任何回應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.