on click event on list item not having any response or console output
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
The part that I can't make work is the .on(click) function. When I click on the ABOUT US list element , the .accordion should get some max height (should be visible). But as you see, I tried testing the code after the click event happens. In console I get nothing. Not sure why. Does it matter if the clickable item has to be a <li> ?
Not sure what am I doing wrong here.
2 answers
solution1
2 2018-11-20 12:48:04
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>
solution2
1 2018-11-20 12:30:30
In JSFiddle you can't just use JQuery by default. 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.
Then you will find the output in the Browser Console.
Edit:
Btw you got another error. i is not defined . To solve this you just need to type var i; for example below the var drops = ... line.
Here is a fiddle with JQuery selected and all errors solved.
https://jsfiddle.net/y92j0thc/6/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
click event without any response
Using click event to show response in console log
click event not firing on newly created list item
Native base list item click event not working
Not able to trigger click event on unordered list item
Click event on every item on populated list with jQuery
get value of list item with click event in React
Click on li list is not Firing any Event
Output at any location into the console
send parameter in event souce url every click on list item
Related Tags