在警告中打开jQuery手风琴面板

编程问答 2022-08-12

问题描述

我已经使用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();
     }
   });
javascriptjqueryjquery-ui-accordion