CODEWITHSUNDEEP
jquerycsstogglepreventdefault
junger
junger

Reputation: 65

Different function on click after preventing default

Test site here has a mobile menu (800px wide or less) that did not have drop down folder functionality. I want the mobile nav menu to function like it does on desktop.

https://josh-unger-4lts.squarespace.com

The default of the title folder was to open up the first link in its folder so I prevent with:

<script>  

$(document).ready(function() {
$('#mobileNav .mobile-folder>a').click(function(e) {
    e.preventDefault();

 });
 });
 </script>

I want to instead display the hidden page links inside the "folder titles " on click.

My code here doesn't work:

<script>
$(document).ready(function(){
$("#mobileNav .mobile-folder>a").click(function(){
$(this).find('.folder.external-link ul ').toggleClass("expand");
});
 });
  </script>

My CSS to hide page links and later display on toggle:

.folder.external-link {display:none!important;}


.folder.external-link.expand {display:block!important;}

Any help is greatly appreciated.

Upvotes: 0

Views: 33

Answers (1)

Temani Afif
Temani Afif

Reputation: 272842

The ul is not a child element of a but a sibling

enter image description here

so your code should be like this (and you can also keep the preventDefault() ):

<script>
$(document).ready(function(){
    $("#mobileNav .mobile-folder>a").click(function(e){
       e.preventDefault();
       $(this).siblings('ul ').toggleClass("expand");
    });
});
</script>

And your CSS should target the ul class :

.mobile-folder ul {display:none!important;}


.mobile-folder ul.expand {display:block!important;}

Upvotes: 1

Related Questions