提问者:小点点

防止按下“物化CSS”菜单中的“选项卡”时下拉关闭


常规信息
使用下拉触发器处理带有集成注册/登录表单的菜单。

问题
Matrialize CSS有一个默认选项来禁用自动关闭菜单:CloseonClick:false。 这很好用。 问题是当按下Tab时它仍然关闭菜单。 许多用户(包括我)按Tab键快速浏览WebForms。 所以我在努力阻止这一切。

我尝试的解决方案
根据这个密切相关的问题中的建议:防止在单击materializecss下拉列表时关闭它,我尝试了类似的方法来处理keydown,keyup和keypress事件。 没有任何效果:

$('.dropdown-button + .dropdown-content').on('keyup', function(event) {
    event.stopPropagation();
});

可接受的解决方案
使用html,css,javascript和/或jQuery可接受解决方案。

在下拉表单中单击MCVE
可以正常工作。 按Tab键,它会关闭菜单。

null

$(document).ready(function(){
  $(".dropdown-trigger").dropdown({
	  alignment: 'left',
	  constrainWidth: false,
	  coverTrigger: false,
	  closeOnClick: false,
	  hover: false
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ul id="usermenu" class="dropdown-content dropdown-menu">
	<li>
		<div class="row no-bottom">
			<div id="login" class="col s12">
				<form id="form-login">
					<div class="row">
						<div class="col s12">
							<label>Username</label>
							<input type="text" class="browser-default form-input" placeholder="Username" id="username"/>
						</div>
					</div>
					<div class="row no-bottom">
						<div class="col s12">
							<label>Password</label>
							<input type="password" class="browser-default form-input" placeholder="Password" id="password"/>
						</div>
					</div>
				</form>
			</div>
		</div>
	</li>
</ul>
<nav class="nav-center grey darken-3">
	<div class="nav-wrapper">
		<a href="#" data-target="mobile-menu" class="sidenav-trigger hide-on-med-and-up"><i class="material-icons">menu</i></a>
		<ul id="nav-mobile" class="hide-on-small-only">
			<li><a class="dropdown-trigger" href="#" data-target="usermenu">Login<i class="material-icons right">arrow_drop_down</i></a></li>
		</ul>
	</div>
</nav>

null


共1个答案

匿名用户

我没有意识到event.stopPropagation();并不阻止同一元素上的其他处理程序运行。 之后的解决方法相当简单:

$('#form-login').on('keydown', function(event) {
    event.stopPropagation();
});