Page is getting reloaded automatically on click event. Cannot determine why?

Question

Have got an button in nav, which on click event is supposed to display:block an ul which is initially set to display:none

HTML -

 <a href=""><i class="mdi-navigation-menu small right" id="lines3"></i></a>
        </nav>

        <ul class="collection center" id="drop-navv" style="display:none">
          <li class="collection-item">Alvin</li>
          <li class="collection-item">Alvin</li>
          <li class="collection-item">Alvin</li>
          <li class="collection-item">Alvin</li>
        </ul>

Js -

  $(document).ready(function() {
    $('#lines3').on('click', function() {
        $("#drop-navv").css("display", "block");
        });
    // other click event
    });

But as soon as I click button it works, but immediately page get reloaded! Its been hours but still cannot figure out why its happening!! PS: Am using materialize framework. And other click event as mentioned in comment is working.

Answer 1

You're going to need to prevent the default on your click handler.

So, first I'd change the href to be href='#' and then add this.

$('#lines3').on('click', function(e) {
    e.preventDefault();
    //your other code here
});

This will prevent the link from going anywhere when someone clicks it.