Question

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

我想要的结果是：每个手风琴都引用一遍。

当我打开 1手风琴>>在页面中某处显示手风琴的内容和相关报价时，关闭其他手风琴并隐藏主报价

当我关闭所有手风琴>>时，显示主要报价（这是我无法解决的主要问题）

 $(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手风琴事件

1 个答案: