列表项上的单击事件，没有任何响应或控制台输出
[英]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.