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();

     });

preventdefault不起作用。单击下拉菜单时，菜单打开，然后我的页面总是刷新，如何停止我的页面刷新。

很奇怪，当我在线上设置断点＆＃34; $（＆＃39; .dropdown-toggle＆＃39;）。on（＆＃39; click＆＃39;，function（e））{＆＃34;页面在进入该功能之前已经刷新，但在点击后它确实刷新了。我无法找到触发刷新的内容。

解决了问题：我有另一个脚本，这是一个onclick事件＆＃34;＆＃34;那个空的我的元素。它会影响此下拉事件。我在＆＃34;＆＃34;上添加了一个限制，问题解决了。页面突然清空让我觉得页面正在刷新。

Answer 1

像这样使用

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

Answer 2

试试这个：

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

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

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

3 个答案: