I was wondering if someone could help me out with a bit of jquery im trying to write.
Im quite new to jQuery so this is prob something easy.
I have a div with an id of 'about-box'
I want it to slide in and out of the viewport when a menu item is pressed.
I have the following 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>
But i am getting the following error message:
Uncaught TypeError: undefined is not a function
Any help getting this to work would be greatly appreciated.
I think the problem is you are not including jQuery-UI in your page, the show / hide implementation you have used requires 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>
You can also use jQueryUI toggle
$(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>
since document is for sure a good element the undefined is not on the ready :visible looks good see here http://api.jquery.com/visible-selector/
So the undefined must be here $('#menu-item-1 a').click or in other code in your page or on the execution of the ready.
Try to find where . remove the if else . does the undefined throw?? if yes the $('#menu-item-1 a') doesnt resolve.
wish it help
尝试将选择器更改为
$('#about-box').is(':visible')
$('#about-box:visible')
是错误的选择器,我想您可以在About-box按钮上切换一个类,并决定滑入或滑出
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.