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

【问题标题】：Open jQuery accordion panel on warning在警告中打开 jQuery 手风琴面板
【发布时间】：2020-12-21 11:31:39
【问题描述】：

我使用 jQuery 创建了一个 tab 手风琴。有 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>

【问题讨论】：

标签： javascript jquery jquery-ui-accordion

【解决方案1】：

尝试以下方法：

$(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();
     }
   });

【讨论】：

这真的很有帮助。谢谢。