How to use preventDefault with my dropdown script?

Question

I have written some javascript for a simple dropdown menu. But in my dropdown links I use hashtags as placeholders for the href attribute (<a href="#") and when they're clicked the page scrolls back to the top.

I want to prevent this with jquery's .preventDefault(); but I'm not sure where and how I'd implement that with my script.

Example: http://codepen.io/anon/pen/rwdoa (it does not add the hashtag to the url because of the iframe codepen uses unfortunately)

// *************************************
//
//   Navigation dropdown
//   -> Expand/collapse submenus
//
// *************************************

// -------------------------------------
// Toggle .is-hidden class onclick and 
// allow only one open menu at a time
// -------------------------------------

$(document).ready(function() {
    $('.Navigation-listItem').click(function(e) {
      if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
        $(".Navigation-list--dropdown").addClass('is-hidden');
        $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
      } else {
        $(".Navigation-list--dropdown").addClass('is-hidden');         
      }          
    });
  $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
    e.stopPropagation();
  });
});

// -------------------------------------
// Anything that gets to the document
// will hide the dropdown
// -------------------------------------

$(document).click(function(){
  $(".Navigation-list--dropdown").addClass('is-hidden');
});

// -------------------------------------
// Clicks within the dropdown won't make
// it past the dropdown itself
// -------------------------------------

$(".Navigation-listItem--hasDropdown").click(function(e){
  e.stopPropagation();
});

Answer 1

that depends, but one way is like this

$('.Navigation-listItem').click(function(e) {
  if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
    $(".Navigation-list--dropdown").addClass('is-hidden');
    $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
  } else {
    $(".Navigation-list--dropdown").addClass('is-hidden');         
  }          
}).children('a.Navigation-link--dropdownTrigger').click(function(e){e.preventDefault();}); // add this line

demo

Answer 2

You should pass event in your handler:

$(document).click(function(e){
  e.preventDefault();
  $(".Navigation-list--dropdown").addClass('is-hidden');
});

Answer 3

I am not sure if I get that right, but I think it's pretty easy, just add e.preventDefault to the first click method.

$(document).ready(function() {
    $('.Navigation-listItem').click(function(e) {
      e.preventDefault();
      if( $(this).children('.Navigation-list--dropdown').hasClass('is-hidden') ){
        $(".Navigation-list--dropdown").addClass('is-hidden');
        $(this).children('.Navigation-list--dropdown').removeClass('is-hidden'); 
      } else {
        $(".Navigation-list--dropdown").addClass('is-hidden');         
      }          
    });
  $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
    e.stopPropagation();
  });
});

Answer 4

Try this

    $('.Navigation-listItem .Navigation-list--dropdown').click(function(e) {
        e.preventDefault();
    });