如何使用jQuery切换来修复此脚本？

Question

我试图使用这个jQuery脚本，但也许有些不对劲。 我想通过单击页面右侧的箭头使脚本工作。 正如你从JavaScript代码和jsfiddle测试中看到的那样，我试图向下滑动隐藏的＃top-bg。

JavaScript代码：

$(document).ready(function() {
    $(".bottone").click(function() {
        $("#top-bg").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});

这是jsfiddle测试： TEST

我做错了什么？

Answer 1

您没有使用正确类型的引号。

两者之间有很大的不同：

$(“.bottone”).click(function(){

和：

$(".bottone").click(function(){

Answer 2

您使用的是“智能引号”，而不是常规引号。 此外，不需要a标签，您可以将其删除并将点击功能直接应用于triangolo

$("#triangolo").click(function(){
    $("#top-bg").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

更新了jsFiddle

Answer 3

你使用错误的引号，你也尝试点击一个空标签（事实上没有任何东西）......;）

这是一个有效的JsFiddle： http ： //jsfiddle.net/uazw6/11/

  <div id="top-bg" class="bg"></div>
   <div id="top" class="bg">
   <div id="triangolo"><a href="#" class="bottone">test</a>
       </div>
  </div>

Javascript：

$(document).ready(function(){

  $(".bottone").click(function(){
      $("#top-bg").slideToggle("slow");
      $(this).toggleClass("active");
  });

});

Answer 4

我已经修好了...我已经更新了你的jsfiddle ...测试它...

你的代码现在如下...

$(document).ready(function(){

$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});

Answer 5

您还可以通过更改以下代码来解决此问题

<div id="triangolo"><a href="#" class="bottone"></a>
           </div>

同

<a href="#" class="bottone"><div id="triangolo">
           </div></a>