单击下拉菜单时，它会继续转到新页面，而不仅仅是打开菜单

Question

      <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>

我的脚本功能是：

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

当单击下拉菜单时，菜单打开，然后我的页面始终刷新，如何停止刷新我的页面。

奇怪的

是，当我在"$（'.dropdown-toggle'）.on（'click'， function（e）{ "行上设置断点时，页面在进入函数之前已经刷新，但它确实在点击后刷新。我无法找出是什么触发了刷新。

解决了问题：我有另一个脚本，它是 " 上的 onclick 事件，清空了我的元素。它会影响此下拉事件。我在"上添加了一个约束，问题解决了。页面突然清空，让我觉得页面刷新了。

Answer 1

试试这个：

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

Answer 2

像这样使用

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

Answer 3

你必须像这样绑定事件吗？

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

如果没有，修复

它的一种简单方法是将代码移动到方法中，并将函数名称直接添加到带有返回符的链接中......

<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>

对于方法：

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