JQuery Toggle Div Switcher - PullRequest
Новая
       40

JQuery Toggle Div Switcher

1 голос
/ 30 июля 2010

Я пытаюсь создать страницу с часто задаваемыми вопросами. На странице будет 2 столбца: в первом столбце будет список вопросов, во втором столбце будут ответы.

По сути, я хотел бы скрыть столбец ответа, и при нажатии на вопрос он исчезнет. При нажатии на другой вопрос старый ответ исчезнет, ​​а новый ответ исчезнет. Поэтому я предполагаю переключение эффект переключения?

Вот структура моего вывода html из Drupal: 

<!-- Question column -->

<div id="question>

     <div class="views-row views-row-1">
          <div class="question">Question 1 Here!</div>
     </div>

     <div class="views-row views-row-2">
          <div class="question>Question 2 Here!</div>
     </div>

      <div class="views-row views-row-3">
          <div class="question>Question 3 Here!</div>
     </div>

</div>


<!-- Answer column -->

<div id="answer>

     <div class="views-row views-row-1">
          <div class="answer">Answer 1 Here!</div>
     </div>

     <div class="views-row views-row-2">
          <div class="answer>Answer 2 Here!</div>
     </div>

      <div class="views-row views-row-3">
          <div class="answer>Answer 3 Here!</div>
     </div>

</div>

Теперь вот что мне удалось сделать до сих пор. Мне удалось заставить первый вопрос включать / выключать себя с помощью анимированного эффекта затухания. Когда дело доходит до сокрытия других div, чтобы показать новый div, я заблудился. Не могли бы вы помочь настроить мой плагин jQuery? 

      jQuery.fn.fadeToggle = function(speed, easing, callback) {

      return this.animate({opacity: 'toggle'}, speed, easing, callback);  

      };



$(document).ready(function() {

  $("#answer .views-row").hide();

  $("#question .views-row-1").click(function(){

  $("#answer .views-row-1").fadeToggle("slow");

  });

  });

Очень признателен за любую помощь! Приветствия.

1 Ответ

0 голосов
/ 30 июля 2010

Я думаю это то, что вы ищете: 

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};
$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).fadeToggle("slow").siblings().fadeOut();
    });
});

Вы можете попробовать здесь , то, что мы делаем здесь, получает.index() из <div>, который вы нажали вверху, и показывает соответствующий <div> по этому показателю ниже (используя .eq())..siblings().fadeOut() - всего лишь предположение, которое скрывает предыдущий ответ, поэтому показывается только по одному, если вы хотите показать какое-либо число сразу, просто удалите эту часть.

...