[英]jQuery slideDown, not working on links
EDIT : I was missing }); 编辑 :我不见了}); at the end, thanks to Petr for hinting me the mistake
最后,感谢彼得给我的错误提示
I have the following HTML code: 我有以下HTML代码:
<a href='#' class='button_flat'> Why Choose Us </a>
<div class='whyus'> Lorem Ipsum </div>
And this is my jQuery 这是我的jQuery
$(document).ready(function(){
$(".button_flat").click(function(){
$(".whyus").slideDown();
});
CSS 的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;
}
I dont know why the code is not working. 我不知道为什么代码不起作用。 I would appreciate if someone could help me.
如果有人可以帮助我,我将不胜感激。
You forgot to close $(document).ready
, add });
您忘记关闭
$(document).ready
,添加});
to the end of the script and it'll work just fine: 到脚本的末尾,它将正常工作:
$(document).ready(function () {
$(".button_flat").click(function () {
$(".whyus").slideDown();
});
});
Because you forgot });
因为您忘记了
});
at the end of jquery. 在jQuery的末尾。 I recommend using
toggle
, so when you have the .whyus div displayed, clicking again on button will slide it up. 我建议使用
toggle
,因此当显示.whyus div时,再次单击按钮将其向上滑动。
$(document).ready(function(){
$(".button_flat").click(function(){
$(".whyus").toggle("slow");
});
});
You should return false;
您应该
return false;
anchor click event to prevent it from opening link that's in href="#". 锚定点击事件,以防止其打开href =“#”中的链接。 And before
.slideDown(duration);
并且在
.slideDown(duration);
之前.slideDown(duration);
animation must stop and hide then animate it again. 动画必须停止并隐藏,然后再次为其设置动画。
Html: HTML:
<a href='#' class='button_flat'> Why Choose Us </a>
<div class='whyus'> Lorem Ipsum </div>
Js: Js:
$(document).ready(function () {
$(".button_flat").click(function () {
$(".whyus").stop().hide().slideDown();
return false;
});
});
Css: 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;
}
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>
.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;
}
$(document).ready(function(){
$(".whyus").hide();
$(".button_flat").click(function(){
$(".whyus").toggle("slow");
});
});
Demo Hope this helps 演示希望这会有所帮助
Thank you 谢谢
Add event.preventDefault(); 添加event.preventDefault(); at the end of click listener function, to stop default click behavior continued by browser.
在点击侦听器功能结束时,停止浏览器继续执行默认的点击行为。
$(document).ready(function(){
$(".button_flat").click(function(){
$(".whyus").slideDown();
event.preventDefault();
});
});
Add event.preventDefault(); 添加event.preventDefault();
$(document).ready(function(event){
$(".button_flat").click(function(){
$(".whyus").slideDown();
event.preventDefault();
});
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.