javascript - jQUery preventDefault 或 stopPropagation() 不适用于切换表单
问题描述
我正在制作登录表单下拉菜单。当用户单击登录项时,将打开下拉表单。问题是一旦单击表单或其元素,它就会关闭。
我试过下面的代码但没有工作
if ($('.auth').length) {
$('.auth').click(function (event) {
$(this).toggleClass('auth-active');
$('.el-auth-box').toggle();
//event.stopPropagation(); // not working
event.preventDefault(); // not working
//event.stopImmediatePropagation(); // not working
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="auth auth-active">
<li class="auth-power">
<i class="material-icons">power_settings_new</i>
<ul class="el-auth-box" style="display: block;">
<li class="el-auth-box-items">
<form action="#" method="post">
<input dir="auto" name="emailhandle" placeholder="Email or Username" type="text">
<input dir="auto" name="password" placeholder="Password" type="password">
<div class="checkbox">
<input id="el-rememberme" name="remember" type="checkbox" value="1">
<label for="el-rememberme">Remember</label>
</input>
</div>
<input name="csfr_code" type="hidden" value="0-1548314066-7814ce8b50bba9749389fdf8e76639a317c55c14">
<input class="el-form-tall-button el-form-tall-button-login" name="dologin" type="submit" value="Login"></input>
</input>
</input>
</input>
</form>
</li>
</ul>
<!-- el-auth-box -->
</li>
<!-- el-auth-box-items -->
</ul>
解决方案
您可以为 i 元素设置事件点击。试试看:
if ($('.auth').length) {
$('.auth i').click(function (event) {
$(this).toggleClass('auth-active');
$('.el-auth-box').toggle();
//event.stopPropagation(); // not working
event.preventDefault(); // not working
//event.stopImmediatePropagation(); // not working
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="auth auth-active">
<li class="auth-power">
<i class="material-icons">power_settings_new</i>
<ul class="el-auth-box" style="display: block;">
<li class="el-auth-box-items">
<form action="#" method="post">
<input dir="auto" name="emailhandle" placeholder="Email or Username" type="text">
<input dir="auto" name="password" placeholder="Password" type="password">
<div class="checkbox">
<input id="el-rememberme" name="remember" type="checkbox" value="1">
<label for="el-rememberme">Remember</label>
</input>
</div>
<input name="csfr_code" type="hidden" value="0-1548314066-7814ce8b50bba9749389fdf8e76639a317c55c14">
<input class="el-form-tall-button el-form-tall-button-login" name="dologin" type="submit" value="Login"></input>
</input>
</input>
</input>
</form>
</li>
</ul>
<!-- el-auth-box -->
</li>
<!-- el-auth-box-items -->
</ul>
推荐阅读
- firebase - Firestore:检查用户的 Post Like-reaction 的最佳实践
- office-js - 任务窗格在最新版本的 OfficeJS Excel 中不起作用
- typescript - TypeScript 中的对象动态属性访问
- symfony - 使用集合处理 Formbuilder 上的 OneToMany 字段
- java - 如何将二维数组或任何数组专门转换为列表
- > 在 Java 8 中?
- c# - 不一致的JArray如何计算
- javascript - onsubmit 表单不起作用需要显示一些验证
- java - 我的 mergeSort 实现有问题
- c++ - C ++中的井字游戏,再次播放功能问题
- sql - 将 ROW_NUMBER 列添加到流式数据帧