了解jQuery

好吧,我正在设计一个网站,并认为我会坚持一些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;
    });

});

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

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

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

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

首先,我建议您的常见问题解答的结构如下:

  

    What is green and flies
    

      Super Pickle!
    
  
  

    What is Red and bad for your teeth
    

      a Brick
    
  
  

然后按如下方式定义jQuery:

说明:

(实施例1,)

这是被点击的链接

获取包含此元素的元素并具有"qa"类(包含问题和答案的框)

选择所有的兄弟姐妹.(我们现在将所有qa作为jQ对象)

隐藏答案

(例2)

这是单击的行或链接

获取包含此元素的元素并具有"qa"类(包含问题和答案的框)

揭示答案

一个有效的演示是在这里.

这为你做了几件事:

如果用户深层链接到答案,则会自动显示答案

如果用户单击一个答案,则隐藏所有其他答案

你可以给你的div正确的id,这有助于搜索引擎优化链接到个别答案