在引导程序中单击元素内部时如何禁用切换功能

Posted 2023-05-07

【中文标题】在引导程序中单击元素内部时如何禁用切换功能

【英文标题】：How to disable toggle function when clicking inside of the element in the bootstrap

【发布时间】：2016-10-19 22:42:44

【问题描述】：

我正在使用带有 jquery 的引导程序。 它在下拉菜单中显示一个登录表单，但是当您单击表单内部时它正在关闭。

这是我的代码：http://www.codeply.com/go/dvPYU6GHpo

$('#profili').click(function() 
  $('#prof').addClass("open");
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav navbar-nav pull-right" style="width: 100%;">

  <li style="height: 57px;  float: right">
    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="padding-left: 10px; padding-right: 5px; padding-top: 13px;">
      <img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_grey_192x192.png" >
    </a>

    <div class="dropdown-menu dropdown-usermenu pull-right" style="width: 300px; height: 200px; padding-top: 10px;  padding-left: 10px;  padding-right: 10px;">

      <form action="" method="post" role="form">

        <div class="form-group">
          <input class="form-control" type="email" name="user_email" style="padding-left: 10px" minlength="6" maxlength="40" placeholder="Email &nbsp;*" required="">
        </div>
        <div class="form-group">
          <input class="form-control" type="password" name="user_password" style="padding-left: 10px" minlength="6" maxlength="20" placeholder="Password &nbsp;*" required="">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="user_remember">
          </label>Remember Me
        </div>

        <div class="form-group">
          <input class="btn btn-primary btn-md" type="submit" name="login" value="Log In" style="margin-top: 0px; width: 80px">
          <a href="#" class="btn btn-primary btn-md" style="margin-top: 0px; width: 80px" value="Sign Up">Sign Up</a>
          <br> <a href="recover.php" style="margin-left: 20px;">Recover Password</a>
        </div>

      </form>

    </div>
  </li>
</ul>

如果用户在表单内点击，如何禁用关闭？

提前致谢！

【问题讨论】：

Twitter Bootstrap - Avoid dropdown menu close on click inside的可能重复

【参考方案1】：

尝试使用event.stopPropagation()：

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

$('#profili form').click(function(e)
  e.stopPropagation();
);

我已经从您的 codeply 中复制了 html 代码，因为它有点不同。请查看结果：http://www.codeply.com/go/ewpVXkZWCy

$('#profili form').click(function(e) 
  e.stopPropagation();
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<ul class="nav navbar-nav pull-right" style="width: 100%;">

  <li style="height: 57px; float: right" id="prof">
    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="padding-left: 10px; padding-right: 5px; padding-top: 13px;">
      <img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_grey_192x192.png" >
    </a>

    <div class="dropdown-menu dropdown-usermenu pull-right" style="width: 300px; height: 200px; padding-top: 10px;  padding-left: 10px;  padding-right: 10px;" id="profili">

      <form action="" method="post" role="form">

        <div class="form-group">
          <input class="form-control" type="email" name="user_email" style="padding-left: 10px" minlength="6" maxlength="40" placeholder="Email &nbsp;*" required="">
        </div>
        <div class="form-group">
          <input class="form-control" type="password" name="user_password" style="padding-left: 10px" minlength="6" maxlength="20" placeholder="Password &nbsp;*" required="">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" name="user_remember">
          </label>Remember Me
        </div>

        <div class="form-group">
          <input class="btn btn-primary btn-md" type="submit" name="login" value="Log In" style="margin-top: 0px; width: 80px">
          <a href="#" class="btn btn-primary btn-md" style="margin-top: 0px; width: 80px" value="Sign Up">Sign Up</a>
          <br> <a href="recover.php" style="margin-left: 20px;">Recover Password</a>
        </div>

      </form>

    </div>
  </li>
</ul>

【讨论】：

很高兴能提供帮助。欢迎来到 Stack Overflow！