javascript - jQuery slideDown，不适用于链接

Question

编辑：我错过了 }); 最后，感谢 Petr 提示我这个错误

我有以下 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

你忘了 close $(document).ready，添加});到脚本的末尾，它会工作得很好：

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

jsFiddle在这里

Answer 2

You should return false; anchor click event to prevent it from opening link that's in href="#". And before .slideDown(duration); animation must stop and hide then animate it again.

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 3

Here is the edited code. The postion of anchor tag is fixed and the dropdown remain hidden at page load.

<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 Hope this helps

Thank you

Answer 4

尝试

<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();
 });
});

演示

Answer 5

});因为你在 jquery 的末尾忘记了。我推荐使用toggle，所以当您显示 .whyus div 时，再次单击按钮会将其向上滑动。

现场演示

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

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();
});

});