出现警告时打开 jQuery 手风琴面板
Open jQuery accordion panel on warning
我使用 jQuery 创建了一个手风琴标签。有 3 个选项卡,其中一个有一个标记为必填项的输入表单。因此,当用户错过必填字段并单击提交按钮时,它会显示一个警报。
但是对于手风琴选项卡,当用户错过输入字段并按下提交时,选项卡折叠时什么也不会发生。所以我希望标签会在点击时打开并显示警报。
这是我正在使用的代码
$(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, 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 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, 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 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)',
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, 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 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();
}
});
我使用 jQuery 创建了一个手风琴标签。有 3 个选项卡,其中一个有一个标记为必填项的输入表单。因此,当用户错过必填字段并单击提交按钮时,它会显示一个警报。
但是对于手风琴选项卡,当用户错过输入字段并按下提交时,选项卡折叠时什么也不会发生。所以我希望标签会在点击时打开并显示警报。
这是我正在使用的代码
$(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, 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 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, 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 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)',
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, 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 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();
}
});