问题描述
当您单击姿势的描述信息坠落的图像出现在右边你会发现。当您单击姿势2或3的姿势的图片和描述的变化，他们现在应该。
You will notice when you click posture 1 the description drops down and images appear on the right. Now when you click posture 2 or posture 3 the images and description change as they should.
我现在需要做的是 -
What I need to do now is -
如果姿势1已经被点击，然后姿势2被点击姿势1菜单需要关闭，使得只有一个姿势描述可见在同一时间。
If posture 1 has been clicked and then posture 2 is clicked the posture 1 menu needs to close so that there is only one posture description visible at one time.
如果我还可以让这个如果当前开放的姿态项被点击，使其关闭并没有开放的姿态描述，有也没有在右边显示的图像。
If I could also make it so that if the current open posture item is clicked so that it closes and there are no open posture descriptions that there also no images displayed on the right.
最后，是有办法，以确保只有一组动画图像的运行过程中，由于只是说用户经过所有26个选项，他们继续在后台运行，它可能会变得很懒（感谢尼克Craver为使这一以上）。
Finally is there a way to make sure only one set of animation images is running, because just say the user goes through all 26 options and they continue to run in the background it may get sluggish (thanks to Nick Craver for bringing that up).
目前阶段只姿势1，2和3是可用的。好吧终于有些code -
At this stage only posture 1, 2 and 3 are available. Ok finally some code -
//Description drop-down boxes
$（文件）。就绪（函数（）{
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click
$("h5.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("h5.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow");
});
}）;
//进出感谢aSeptik右侧掉色图片$（文件）。就绪（函数（）{
$（'＃section_Q_01，＃section_Q_02，＃section_Q_03）隐藏（）;
//Images on the right fade in and out thanks to aSeptik$(document).ready(function(){
$('#section_Q_01,#section_Q_02,#section_Q_03').hide();
$(function() {
$('h5.trigger a').click( function(e) {
e.preventDefault();
var trigger_id = $(this).parent().attr('id'); //get id Q_##
$('.current').removeClass('current').hide(); //add a class for easy access & hide
$('#section_' + trigger_id).addClass('current').fadeIn(5000); //show clicked one
});
});
}）;
//Fading pics
$（文件）。就绪（函数（）{ $（'图片'）。周期（{ FX：褪色， 速度：2500 }）;}）;
$(document).ready(function(){ $('.pics').cycle({ fx: 'fade', speed: 2500 });});
说明箱 -
<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing Deep Breathing :</a></h5>
<div class="toggle_container" >
<div class="block">
<span class="sc">Pranayama Series</span>
<p class="bold">Benefits:</p>
</div>
</div>
<h5 class="trigger" id="Q_02" ><a href="#">Posture 2 : Half Moon Pose With Hands To Feet Pose :</a></h5>
<div class="toggle_container">
<div class="block">
<span class="sc">Ardha Chandrasana with Pada-Hastasana</span>
<p class="bold">Benefits:</p>
</div>
</div>
<h5 class="trigger" id="Q_03" ><a href="#">Posture 3 : Awkward Pose :</a></h5>
<div class="toggle_container">
<div class="block">
<span class="sc">Utkatasana</span>
<p class="bold">Benefits:</p>
</div>
</div>
和右边的图像 -
<div id="section_Q_01" class="01">
<div class="pics">
<img src="../images/multi/poses/pose1/Pranayama._01.jpg"/>
<img src="../images/multi/poses/pose1/Pranayama._02.jpg"/>
<img src="../images/multi/poses/pose1/Pranayama._03.jpg"/>
</div>
</div>
<div id="section_Q_02" class="02">
<div class="pics">
<img src="../images/multi/poses/pose2/Half_Moon_Pose_04.jpg" />
<img src="../images/multi/poses/pose2/Backward_Bending_05.jpg" />
<img src="../images/multi/poses/pose2/Hands_to_Feet_Pose_06.jpg" />
</div>
</div>
<div id="section_Q_03" class="03">
<div class="pics">
<img src="../images/multi/poses/pose3/Awkward_01.jpg" />
<img src="../images/multi/poses/pose3/Awkward_02.jpg" />
<img src="../images/multi/poses/pose3/Awkward_03.jpg" />
</div>
</div>
这将是一个奖金，如果图像淡出另一个元素被点击时...但不是什么大不了的。
It would be a bonus if images faded out when another element is clicked... but not a big deal.
感谢您在看看
推荐答案
演示： HTTP ：//jsbin.com/aceze/28 源 http://jsbin.com/aceze/28/edit
JQUERY code：
JQUERY CODE:
$(function() {
$('h5.trigger a').click( function(e) {
e.preventDefault();
//TOGGLE PART
$('.block').slideUp(400);
if( $(this).parent().next().is(':hidden') ){
$(this).parent().next().slideDown(400);
}
//DISPLAY HIDE BASED ON CLICK
var trigger_id = $(this).parent().attr('id');
$('.current').removeClass('current').hide();
$('#section_' + trigger_id).addClass('current').fadeIn(500);
// IMAGE SLIDER
$('#section_' + trigger_id +' .pics img:gt(0)').hide();
setInterval(function(){
$('#section_' + trigger_id +' .pics :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('#section_' + trigger_id +' .pics');},
3000);
});
});
HTML翻转部分必须看起来像这样
HTML TOGGLE PART MUST LOOK LIKE THIS
<div class="toggle_container">
<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing:</a></h5>
<div class="block" style="display: none">
<span class="sc">Pranayama Series</span>
<p class="bold">Benefits:</p>
</div>
</div>
这篇关于jQuery的褪色和点击时交换的元素也将涉及到一个手风琴菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！