[英]jQuery - Hide / Show not displaying div and showing error
我想知道是否有人可以通过尝试编写一些jquery来帮助我。
我对jQuery很陌生,因此这很容易实现。
我有一个ID为“ about-box”的div
我希望它在按下菜单项时滑入和滑出视口。
我有以下jQuery。
<script type="text/javascript">
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if($('#about-box:visible').length)
$('#about-box').hide("slide", { direction: "left" }, 1000);
else
$('#about-box').show("slide", { direction: "left" }, 1000);
});
});
</script>
但是我收到以下错误消息:
Uncaught TypeError: undefined is not a function
任何帮助使它起作用的方法,将不胜感激。
我认为问题是您的页面中没有包含jQuery-UI,您使用的show / hide实现需要jQuery UI
$(document).ready(function() { $('#menu-item-1 a').click(function() { if ($('#about-box').stop(true, true).is(':visible')) { $('#about-box').hide("slide", { direction: "left" }, 1000); } else { $('#about-box').show("slide", { direction: "left" }, 1000); } }); });
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> <div id="menu-item-1"><a>menu-item-1 a</a></div> <div id="about-box">about-box</div>
您还可以使用jQueryUI切换
$(document).ready(function() { $('#menu-item-1 a').click(function() { $('#about-box').toggle("slide", { direction: "left" }, 1000); }); });
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> <div id="menu-item-1"><a>menu-item-1 a</a></div> <div id="about-box">about-box</div>
由于文档肯定是好的元素,因此未定义的元素未准备就绪:visible看起来不错,请参见此处http://api.jquery.com/visible-selector/
因此,未定义的必须在此处$('#menu-item-1 a')。click或页面中或执行ready的其他代码中。
尝试找到哪里。 删除if else。 未定义抛出? 如果是,则$('#menu-item-1 a')无法解析。
希望有帮助
尝试将选择器更改为
$('#about-box').is(':visible')
$('#about-box:visible')
是错误的选择器,我想您可以在About-box按钮上切换一个类,并决定滑入或滑出
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.