javascript - Js 自动扩展 div 在我的页面中不起作用

Question

我正在尝试在我正在设计的网站上制作一个自动扩展的 div，但它似乎在页面上不起作用（在 jsfiddle.net 上工作正常）

脚本：http: //jsfiddle.net/tJugd/1057/

var lol;
lol = 0;

$('#question').click(function(){
    if (lol==0){
      $('#question').animate({height:'300'});
      lol = 1;
    }else{
      $('#question').animate({height:'0'});
      lol = 0;                     
    }
})

这是我试图在其上实现的页面：http ://www.trulyscience.com/test/index.html （sie 上的红色“问题”）

我真的不知道我做错了什么，我检查了许多相关的线程，大部分都有效，但也只在 Jsfiddle 而不是我的页面上。

有人可以帮忙吗？

Answer 1

您可以使用触发方法来执行此操作，在声明事件单击“#question”后调用它：

function loadQuestion(){

    var lol;
    lol = 0;

    $('#question').click(function(){
        if (lol==0){
          $('#question').animate({height:'300'});
          lol = 1;
        }else{
          $('#question').animate({height:'0'});
          lol = 0;                     
        }
    });

    $('#question').trigger('click'); // Simulating click
}

$(document).ready(function(){
    loadQuestion();
});

http://jsfiddle.net/tJugd/1058/

Answer 2

您在同一个 html 文档中使用了两次 id 问题，这可能会导致问题。如果要对元素使用相同的名称，请使用 class 而不是 id。

也尝试用$(document).ready(function(){ /*your code*/ });

Answer 3

Well, for starters, on your website, $ is not jQuery. It's a shortcut for document.getElementById.

I ran this code in the console after the page loaded, and the animation worked fine:

var lol = 0;
jQuery('#question').click(function (){
if (lol === 0){
      jQuery('#question').animate({height:'300'});
      lol = 1;
    }else{
      jQuery('#question').animate({height:'20'});
      lol = 0;                     
    }
});