Question

我正在尝试构建常见问题解答页面。该页面将有2列：第一列将包含问题列表，第二列将包含答案。

基本上我想要隐藏答案栏，当点击一个问题时，它会淡入。当点击另一个问题时，旧的答案将淡出，新的答案会消失。所以我想一个切换/切换效果？

以下是Drupal的html输出结构：

<!-- 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");

  });

  });

非常感谢任何帮助！欢呼声。

Answer 1

我认为这就是你所追求的：

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();
    });
});

You can give it a try here，我们在这里做的是获取您点击的<div>的{{3}}，并在下面的索引处显示相应的<div>（使用{ {3}}）。 .siblings().fadeOut()只是一个猜测，它隐藏了之前的答案，因此一次只显示一个，如果您想一次显示任何数字，只需删除该部分即可。

jQuery切换Div切换器

1 个答案: