Jquery исчезает и меняет элемент при нажатии, что также относится к аккордеонному меню - PullRequest
Новая
       25

Jquery исчезает и меняет элемент при нажатии, что также относится к аккордеонному меню

1 голос
/ 01 мая 2010

При нажатии на позу 1 вы заметите, что описание выпадает и изображения появляются справа. Теперь, когда вы нажимаете позу 2 или позу 3, изображения и описание меняются, как и должно.

просмотр веб-сайта

Что мне нужно сделать сейчас -

Если щелкнуть положение 1, а затем щелкнуть положение 2, необходимо закрыть меню положения 1, чтобы в один момент было видно только одно описание положения.

Если бы я мог также сделать так, чтобы при щелчке по текущему элементу открытой позы, чтобы он закрывался и не было описаний открытой позы, справа также не было бы изображений.

Наконец, есть способ убедиться, что запущен только один набор анимационных изображений, потому что просто скажите, что пользователь проходит через все 26 опций, и они продолжают работать в фоновом режиме, это может стать вялым (спасибо Нику Крейверу за то, что он принес это. вверх).

На данном этапе доступны только позы 1, 2 и 3. Хорошо, наконец, некоторый код - 

//Description drop-down boxes

$ (документ) .ready (функция () {

//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') скрыть (); 

    $(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 (функция () { $ (». Фото). Цикл ({ 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>

Было бы бонусом, если изображения исчезли при нажатии на другой элемент ... но не имеет большого значения.

Спасибо, что посмотрели

1 Ответ

1 голос
/ 01 мая 2010

ДЕМО: 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 TOGGLE PART ДОЛЖЕН СМОТРЕТЬ, КАК ЭТОТ 

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