Question

编辑：我最后错过了}）; ，感谢彼得暗示我的错误

我有以下HTML代码：

 <a href='#' class='button_flat'> Why Choose Us </a>
<div class='whyus'> Lorem Ipsum </div>

这是我的jQuery

$(document).ready(function(){
            $(".button_flat").click(function(){
            $(".whyus").slideDown();
            });

CSS

.button_flat {
        border:0px;
        background: #34495e;
        color: white;
        padding-top:10px;
        padding-bottom:10px;
        text-decoration:none;
        padding-left:15px;
        padding-right:15px;
    }
    .whyus {

        display:none;

    }

我不知道为什么代码不起作用。如果有人能帮助我，我将不胜感激。

Answer 1

您忘了关闭$(document).ready，将});添加到脚本的末尾，它会正常工作：

$(document).ready(function () {
    $(".button_flat").click(function () {
        $(".whyus").slideDown();
    });
});

jsFiddle here

Answer 2

尝试

<a href='#' class='button_flat'> Why Choose Us </a>
 <div class='whyus' style="display:none;"> Lorem Ipsum </div>

$(document).ready(function () {
$(".button_flat").click(function () {
    $(".whyus").slideDown();
 });
});

Demo

Answer 3

因为你在jquery结束时忘记了});。我建议使用toggle，因此当您显示.whyus div时，再次单击按钮会将其向上滑动。

LIVE DEMO

$(document).ready(function(){
  $(".button_flat").click(function(){
    $(".whyus").toggle("slow");
  });
});

Answer 4

您应该return false;锚定点击事件，以防止它打开href =“＃”中的链接。在.slideDown(duration);动画必须停止并隐藏之前，再将其设置为动画。

HTML：

 <a href='#' class='button_flat'> Why Choose Us </a>
 <div class='whyus'> Lorem Ipsum </div>

JS：

$(document).ready(function () {
  $(".button_flat").click(function () {
     $(".whyus").stop().hide().slideDown();
     return false;
  });
});

的CSS：

.button_flat {
  border:0px;
  background: #34495e;
  color: white;
  padding-top:10px;
  padding-bottom:10px;
  text-decoration:none;
  padding-left:15px;
  padding-right:15px;
}
.whyus {
  display:none;
}

Answer 5

这是编辑过的代码。锚标记的位置是固定的，下拉列表在页面加载时保持隐藏状态。

<a href='#' class='button_flat'> Why Choose Us </a>
<br><br>
<div class='whyus'> Lorem Ipsum </div>

CSS

.button_flat {
        border:0px;
        background: #34495e;
        color: white;
        padding-top:10px;
        padding-bottom:10px;
        text-decoration:none;
        padding-left:15px;
        padding-right:15px;
        position:fixed;
    }
    .whyus {

        display:none;

    }

jquery的

$(document).ready(function(){
     $(".whyus").hide();
  $(".button_flat").click(function(){
    $(".whyus").toggle("slow");
  });
});

<强> Demo 希望这有帮助

谢谢

Answer 6

添加event.preventDefault（）;在点击监听功能结束时，停止浏览器继续默认点击行为。

$(document).ready(function(){
    $(".button_flat").click(function(){
      $(".whyus").slideDown();
      event.preventDefault();
    });
});

Answer 7

添加event.preventDefault（）;

$(document).ready(function(event){
$(".button_flat").click(function(){
  $(".whyus").slideDown();
  event.preventDefault();
});

}）;

jQuery slideDown，不处理链接

7 个答案:

jsFiddle here

CSS

jquery的