Javascript 了解jQuery

好的，我正在设计一个网站，我想我应该加入一些jQuery，因为我真的需要这么多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;
    });

});

这很好，但是如果你点击一个答案已经下滑的链接，它会向上下滑，然后再向下下滑

我不确定用什么最干净的方法来阻止这种情况发生——有什么想法吗？

你应该使用这种效果

---

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

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

---

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

首先，我建议您的常见问题解答采用以下结构：

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

$（函数（）{
//隐藏所有答案
$（'div#faq.qa.a'）.hide（）；
//将单击事件绑定到所有问题
$（'div#faq.qa.qa'）.bind(
“点击”，
职能（e）{
//汇总所有其他答案（见例1）
$（this）.parents（'.qa'）.sides（）.children（'.a'）.slideUp（）；
//揭示此答案（见Ex.2）
$（this）.parents（'.qa'）.children（'.a'）.slideDown（）；
//返回true以保留任何其他单击事件
返回true；
});
//检查location.hash以查看是否需要展开一个（直接链接）
$（location.hash）。查找（'.qa'）。单击（）；
});

说明：

（例1）

• 这是已单击的链接
• 获取包含此元素且具有“qa”类的元素（包含问题和答案的框）
• 选择它的所有同级。（我们现在将所有qa作为jQ对象）
• 隐藏答案

（例2）

• 这是已单击的行或链接
• 获取包含此元素且具有“qa”类的元素（包含问题和答案的框）
• 揭晓答案

正在进行演示

这可以为您做几件事：

• 如果是用户，答案将自动显示
• 如果用户单击一个答案，则所有其他答案都将隐藏
• 你可以给你的div提供合适的id，这有助于搜索引擎优化个人答案的链接

像Soviut说的那样使用slideToggle（），但作为提示，您可以在实际的CSS文件中声明display属性，而不是在javascript中声明它。jQuery将发现它隐藏在样式表中，并且仍然执行适当的滑动功能

您还可以使用

$（“.answer”）.hide（）

而不是设置displaycss属性。我只是想让你知道。
$（“#maincontent a.animate”）。单击（function（）{var id=$（this.attr（'href'）；$（id）。slideToggle（'slow'）；return false；}）；我想在jquery中设置css，这样对于没有启用JS的UAs，他们仍然可以阅读它。“K，我正在设计一个网站，我想我应该加入一些jquery，因为我真的需要一些JS体验。”-当我读到这句话的时候，我笑了。jquery与javascript不同。如果你想学习javascript，那就选一本书吧。如果您想学习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>