CODEWITHSUNDEEP
javascripthtmlcss
Cherry Zhang
Cherry Zhang

Reputation: 101

when clicking the dropdown menu, it keeps going to a new page instead of just opening the menu

      <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-user fa-fw"></i>
                            <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a><i class="fa fa-user fa-fw"></i> User
                                Profile</a></li>
                        <li><a><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i>
                                Logout</a></li>
                    </ul> <!-- /.dropdown-user -->
                </li>

and my scripts function is:

 $('.dropdown-toggle').on('click', function(e){ 

       $(".dropdown").toggleClass("open",true);

       e.preventDefault();

     });

the preventdefault doesn't work. when clicking the dropdown menu, the menu open, then my page always refreshes, how to stop my page being refresh.

it's weird that when I set breakpoint on the line "$('.dropdown-toggle').on('click', function(e){ " the page already refreshed before going into the function, but it did refresh after the click. I can't find out what triggers the refreshing.

Solved the problem: I have another script which is a onclick event on "" that empty my element. It affects this dropdown event. I add a restrain on the "", and the problem solve. The page suddenly emptied made me think the page is refresh.

Upvotes: 0

Views: 421

Answers (3)

Sufyan Jabr
Sufyan Jabr

Reputation: 809

Do you have to bind the event like this ??

$('.dropdown-toggle').on('click', function(e){

If not, An easy way to fix it is to move your code inside a method and add the function name directly to the link with a return... 

<a class="dropdown-toggle" onclick="return MyMethod()" data-toggle="dropdown"> 
<i class="fa fa-user fa-fw"></i>
<i class="fa fa-caret-down"></i>
</a>

And for the method:

function MyMethod(){
$(".dropdown").toggleClass("open",true);
return false;
}

Upvotes: 0

Mani
Mani

Reputation: 2655

Use like this

    $(".dropdown-toggle").click(function(){
       $(this).parent().find(".dropdown-menu").toggle();
       return false;
    });

Upvotes: 1

Sukhwinder Sodhi
Sukhwinder Sodhi

Reputation: 475

Try this:

   $('.dropdown-toggle').on('click', function(e){
     e.preventDefault();
   $(".dropdown-menu").toggleClass("open",true);

Upvotes: 1

Related Questions