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>