jQuery 单击时的手风琴事件

Question

我正在尝试解决一个问题，我需要创建一个可以在页面某处显示和隐藏引号的手风琴系统。

我想要的结果是：每个手风琴 1 个报价。

当我打开 1 accordion >> 在页面某处显示 accordion 的内容和相关引用，并关闭其他 accordion 并隐藏主要引用

当我close all accordions >> show the main quote（这是我无法解决的主要问题）

 $(function() {

   $("#accordion").accordion({
     active: false,
     collapsible: true,
   });

   $("h3").click(function() {
     if ($(".topic").hasClass("ui-accordion-content-active") == true) {
       $('.subcontent:visible').hide();
       $('.mainquote:visible').hide();
       console.log($(this).data("id"));
       $('.subcontent[id=' + $(this).data("id") + ']').delay(500).fadeIn();
     } else {
       $('.subcontent:visible').hide();
     }

   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="mainquote" id="121"><em>main</em></div>
<div class="subcontent" id="123"><em>quote1</em></div>
<div class="subcontent" id="124"><em>quote2</em></div>


<div id="accordion">
  <h3 data-id="123">Section 1</h3>

  <div class="topic">
    <p>
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra
    </p>
  </div>
  <h3 data-id="124" id="section2">Section 2</h3>
  <div class="topic">
    <p>
      Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis
    </p>
  </div>
</div>

Answer 1

Working fiddle.

您需要检查是否有手风琴处于活动状态，然后像这样切换显示：

$(function() {

  $("#accordion").accordion({
    active: false,
    collapsible: true,
  });

  $("h3").click(function() {

    if ($(".topic").hasClass("ui-accordion-content-active") == true) {
      $('.subcontent:visible, .mainquote:visible').hide();

      $('.subcontent[id=' + $(this).data("id") + ']').fadeIn();
    } else {
      $('.subcontent:visible').hide();
    }

    if ($(".ui-state-active").length === 0) {
      $('.subcontent:visible').hide();
      $('.mainquote').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="mainquote" id="121"><em>main</em></div>
<div class="subcontent" id="123" style="display:none"><em>quote1</em></div>
<div class="subcontent" id="124" style="display:none"><em>quote2</em></div>


<div id="accordion">
  <h3 data-id="123">Section 1</h3>

  <div class="topic">
    <p>
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra
    </p>
  </div>
  <h3 data-id="124" id="section2">Section 2</h3>
  <div class="topic">
    <p>
      Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis
    </p>
  </div>
</div>

jQuery 单击时的手风琴事件

jQuery accordion event on click

javascript

jquery

jquery-ui

jquery-ui-accordion