当您点击姿势1时,您会注意到描述会下降,图像会显示在右侧。现在,当您单击姿势2或姿势3时,图像和描述会发生变化。
我现在需要做的是 -
如果单击姿势1然后单击姿势2,则需要关闭姿势1菜单,以便一次只能看到一个姿势描述。
如果我也可以这样做,以便在点击当前打开的姿势项目时关闭它,并且没有打开的姿势描述,右边也没有显示图像。
最后有一种方法可以确保只有一组动画图像正在运行,因为只要说用户经历了所有26个选项并且它们继续在后台运行它可能会变得缓慢(感谢Nick Craver带来的那个向上)。
在此阶段,只有姿势1,2和3可用。好吧最后一些代码 -
//Description drop-down boxes
(文档)$。就绪(函数(){
//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')隐藏();
$(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 }); });
描述框 -
<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>
如果在点击另一个元素时图像消失,这将是一个奖励......但不是什么大不了的。
感谢您一看
答案 0 :(得分:1)
DEMO: http://jsbin.com/aceze/28 消息来源 http://jsbin.com/aceze/28/edit
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 TOGGLE部分必须看起来像这个
<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>