了解jQuery

Question

好的，我正在设计一个网站，并且认为我会坚持使用jQuery，因为我真的需要这样的经验。

我的问题页面在这里：http://new.focalpix.co.uk/moreinfo.php

有问题的JS是：

$(document).ready(function(){

    $(".answer").css("display","none");

    $("#maincontent a.animate").click(function() {
        $("#maincontent .answer").slideUp('slow');
        var id = $(this).attr('href');
        $(id).slideDown('slow');
        return false;
    });

});

这样可以正常工作，但是如果你点击答案已经滑落​​的链接，那么它会向上滑动，然后再向下滑动。

我不确定以最干净的方式阻止这种情况发生 - 任何想法？

Answer 1

您应该使用.slideToggle()效果。

$(document).ready(function() {
    $(".answer").css("display","none");
    $("#maincontent a.animate").click(function() {
        $("#maincontent .answer").slideToggle('slow');
    });
});

Answer 2

首先，我建议你的常见问题解答的结构如下：

<div id="faq">
  <div class="qa" id="faq_greenandflies">
    <span class="q">What is <a href="#faq_greenandflies">green and flies</a></span>
    <div class="a">
      Super Pickle!
    </div>
  </div>
  <div class="qa" id="faq_redandbadforteeth">
    <span class="q">What is <a href="#faq_redandbadforteeth">Red and bad for your teeth</a></span>
    <div class="a">
      a Brick
    </div>
  </div>
  <!--
  More FAQ's here

  -->
</div>

然后按如下方式定义jQuery：

 <script type="text/javascript">
    $(function(){
  // hide all answers
  $('div#faq .qa .a').hide();

      // bind a click event to all questions
  $('div#faq .qa .q a').bind(
        'click',
        function(e){
          // roll up all of the other answers (See Ex.1)
          $(this).parents('.qa').siblings().children('.a').slideUp();
          // reveal this answer (See Ex.2)
          $(this).parents('.qa').children('.a').slideDown();
          // return true to keep any other click events       
          return true;
        });

      // check location.hash to see if we need to expand one (direct link)
      $(location.hash).find('.q a').click();
    });
</script>

说明：

（实施例1，）

• 此是已点击的链接
• 获取包含 this 的元素，并且有一个'qa'类（包含问题和答案的框）
• 选择所有兄弟姐妹。 （我们现在将所有qa作为jQ对象）
• 隐藏答案

（例2）

• 此是已点击的行或链接
• 获取包含 this 的元素，并且有一个'qa'类（包含问题和答案的框）
• 揭示答案

工作演示是here。

这对你有好处：

• 如果是用户deep-links to an answer，则会自动显示答案
• 如果用户点击一个答案，则隐藏所有其他答案
• 您可以为您的div提供正确的ID，以便搜索引擎优化指向个别答案的链接

Answer 3

像Soviut所说的那样使用slideToggle（），但就像一个提示 - 你可以在实际的CSS文件中声明display属性，而不是在javascript中声明它。 jQuery将了解它隐藏在样式表中并仍然执行相应的幻灯片功能。

您也可以使用$(".answer").hide();

而不是设置显示CSS属性。我想我会告诉你的。

Answer 4

尝试使用一种方法，例如：

 $(selector).one('effect', 'data for effect', callback function);

它确保每个元素只发生一次效果。