jQuery Accordion ui - 当面板处于活动状态时显示/隐藏另一个 div

Question

我正在使用 jQuery ui 手风琴。 我在一个 div 中有一个引用，我想在每个手风琴面板处于活动状态时显示它们。我似乎无法让它工作。有任何想法吗？我正在尝试这样的事情......

if ($("#section1").hasClass("ui-accordion-content-active")) { $("#quote1").show();}

<div id="quote1"><em>quote1</em></p></div>
<div id="accordion">
 <h3>Section 1</h3>
  <div id="section1" class="sec1">
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscitait eget.
    </p>

我离得更近了，但仍需要一些帮助。我已将 html 更改为以下内容：

<div class="subcontent" id="123"><em>quote1</em></p></div>
<div class="subcontent" id="124"><em>quote2</em></p></div>


<div id="accordion">
<h3>Section 1</h3>

 <div data-id="123" 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 id="section2">Section 2</h3>
 <div data-id="124" 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：

 $( function() {

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

$("div").click(function(){
        if($(".topic").hasClass("ui-accordion-content-active") ==  
true) {
     // hide open subcontents
    $('.subcontent:visible').hide();
      $('.mainquote:visible').hide();
    // fade in new selected subcontent
     $('.subcontent[id='+$(this).attr('data-    
id')+']').delay(500).fadeIn();    
         } else {
              $('.subcontent:visible').hide(); } 



});});

没有“点击”功能，这是行不通的。无论如何要在没有“点击”功能的情况下显示报价？

Answer 1

这里可以做，不知道是不是很干净

html

 $( 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://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="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>