列表项上的单击事件，没有任何响应或控制台输出

Question

I am trying to make an accordion with my list. 我正在尝试使清单中的一个手风琴。

 '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 link jsfiddle 链接

The part that I can't make work is the .on(click) function. 我无法工作的部分是.on(click)函数。 When I click on the ABOUT US list element , the .accordion should get some max height (should be visible). 当我单击ABOUT US列表元素时， .accordion应该具有一些最大高度（应该可见）。 But as you see, I tried testing the code after the click event happens. 但是如您所见，我在click事件发生后尝试测试代码。 In console I get nothing. 在控制台中，我什么也没得到。 Not sure why. 不知道为什么。 Does it matter if the clickable item has to be a <li> ? 可点击项是否必须为<li>是否重要？

Not sure what am I doing wrong here. 不知道我在做什么错。

Answer 1

I am not sure I understand your question 我不确定我是否理解您的问题
but hope this help 但希望能有所帮助

 $(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>

Answer 2

In JSFiddle you can't just use JQuery by default. 在JSFiddle中，默认情况下不能只使用JQuery。 You have to select the library. 您必须选择库。 Click on JavaScript + No-Library (pure JS) and select your library which would be JQuery 3.3.1 in your case. 单击JavaScript + No-Library (pure JS)然后选择您的库（在您的情况下为JQuery 3.3.1 。

Then you will find the output in the Browser Console. 然后，您将在浏览器控制台中找到输出。

Edit: 编辑：
Btw you got another error. 顺便说一句，您遇到另一个错误。 i is not defined . i is not defined 。 To solve this you just need to type var i; 为了解决这个问题，您只需要输入var i; for example below the var drops = ... line. 例如下面的var drops = ...行。

Here is a fiddle with JQuery selected and all errors solved. 这是一个选择了JQuery并解决了所有错误的小提琴。
https://jsfiddle.net/y92j0thc/6/ https://jsfiddle.net/y92j0thc/6/

列表项上的单击事件，没有任何响应或控制台输出

问题描述

2 个解决方案

解决方案1
2 2018-11-20 12:48:04

解决方案2
1 2018-11-20 12:30:30

列表项上的单击事件，没有任何响应或控制台输出

问题描述

2 个解决方案

解决方案1 2 2018-11-20 12:48:04

解决方案2 1 2018-11-20 12:30:30

解决方案1
2 2018-11-20 12:48:04

解决方案2
1 2018-11-20 12:30:30