让我了解 jQuery

Question

好的，我正在设计一个网站，我想加入一些 jQuery，因为我真的需要 js 经验。

我的问题页面在这里：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 是被点击的链接
• 获取包含 this 并具有“qa”类（包含问题和答案的框）的元素
• 选择其所有同级。 （我们现在将所有 qa 作为 jQ 对象）
• 隐藏答案

（例 2）

• this 是被点击的行或链接
• 获取包含 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);

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