如何解决在警告中打开jQuery手风琴面板
我已经使用jQuery创建了Tab手风琴。有3个标签,其中一个具有输入表单,该表单已标记为必填项。因此,当用户错过必填字段并单击“提交”按钮时,它将显示警报。
但是使用Tab手风琴,当用户错过输入字段并按Submit时,折叠标签不会发生任何事情。因此,我希望单击该选项卡即可打开并显示警报。
这是我正在使用的代码
$(function () {
$('#accordion').accordion({
header: 'h3:not(.ignore)',collapsible: true,heightStyle: "content"
});
});
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form name="test" id="test" class="test">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante,blandit et,ultrices a,suscipit eget,quam. Integer ut neque. Vivamus nisi metus,molestie vel,gravida in,condimentum sit amet,nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3>Section 2</h3>
<div class="section2" id="section2">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<h3>Section 3</h3>
<div>
<p>Mauris mauris ante,nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3 class="ignore"></h3>
<div class="ignore">
<input class="ignore "type="submit">
</div>
</div>
</form>
</body>
</html>
解决方法
尝试以下操作:
$(function () {
$('#accordion').accordion({
header: 'h3:not(.ignore)',collapsible: true,heightStyle: "content"
});
$('input.ignore').on('click',function() {
if(!$('#ui-id-3').hasClass("ui-state-active")) {
$('#accordion').children('#section2').slideToggle();
}
});
});
<!doctype html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form name="test" id="test" class="test">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante,blandit et,ultrices a,suscipit eget,quam. Integer ut neque. Vivamus nisi metus,molestie vel,gravida in,condimentum sit amet,nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3>Section 2</h3>
<div class="section2" id="section2">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<h3>Section 3</h3>
<div>
<p>Mauris mauris ante,nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3 class="ignore"></h3>
<div class="ignore">
<input class="ignore "type="submit">
</div>
</div>
</form>
</body>
</html>
更改内容:我只是添加以下代码,以使第2部分在未打开时打开:
$("input.ignore").on("click",function() {
$('#accordion').children("#section2").slideToggle();
});
编辑:上述解决方案的问题在于,当#section2
已打开时,用户可以通过按下submit
按钮将其关闭。
解决方法如下:
$(function () {
$('#accordion').accordion({
header: 'h3:not(.ignore)',nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3 class="ignore"></h3>
<div class="ignore">
<input class="ignore "type="submit">
</div>
</div>
</form>
</body>
</html>
更改内容:此解决方案提供了if
语句来检测更改:
$('input.ignore').on('click',function() {
if(!$('#ui-id-3').hasClass("ui-state-active")) {
$('#accordion').children('#section2').slideToggle();
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。