Jquery 在单击时淡入淡出并交换元素，这也与手风琴菜单相关

Question

您会注意到，当您单击姿势 1 时，描述会下拉，图像会出现在右侧。现在，当您单击姿势 2 或姿势 3 时，图像和描述会按预期发生变化。

查看网站

我需要什么现在要做的是 -

如果单击姿势 1，然后单击姿势 2，则需要关闭姿势 1 菜单，以便一次只能看到一种姿势描述。

如果我还可以这样做，如果单击当前打开的姿势项目，使其关闭，并且没有打开的姿势描述，则右侧也不会显示图像。

最后有一种方法可以确保只有一组动画图像正在运行，因为只要说用户浏览了所有 26 个选项并且他们继续在后台运行，它可能会变得缓慢（感谢 Nick Craver 提出这一点）。

此阶段只有姿势 1、2 和 3 可用。好吧，最后一些代码 -

//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，右侧图像淡入淡出 $(文档).ready(函数(){
$('#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

$(文档).ready(函数(){ $('.pics').cycle({ 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>                  

如果单击另一个元素时图像淡出，那将是一个奖励......但没什么大不了的。

感谢您的浏览

Answer 1

演示： http://jsbin.com/aceze/28
来源 http://jsbin.com/aceze/28/edit

JQUERY 代码：

$(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 切换部分必须如下所示

<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>