JQuery SlideUP and SlideDown based on Selector Help
I'm teaching myself jQuery and having fun trying to figure this out. I'm using the slideDown
and slideUp
functions to have different <div>
's appear and disappear if needed. But my problem is in the removal. I can get the different selected options to appear separately, however, if both <div>
's are showing when I try to remove just one of the <div>
's, both <div>
's flash quickly and then both disappear. It also happens when only one of the <div>
's is showing too. I click the remove link and both <div>
's flash quickly and then disappear. I really haven't got a clue as to why. The idea behind this code is to allow a user to add to and take away as needed. If a selection was made in mistake, the user would be able to remove it while the other selections that were previously selected stay visible. Here's my code:
<div class="type-select" style="width:400px;">
<select nam开发者_如何转开发e="selectStatus">
<option selected value="Select">Select...</option>
<option id="login">Login</option>
<option id="nav">Navigation</option>
</select></div>
<div id="loginselect"><img src="http://triplemsystems.ekkosolutions.com/images/global/bg-loginPages.gif" height="47" width="162" />
<a id="remove" href="">Remove</a></div>
<div id="navselect"><img src="http://triplemsystems.ekkosolutions.com/images/global/bg-navMain.gif" height="45" width="90"/>
<a id="removenav" href="">Remove</a></div>
<script>
$("#loginselect").hide("fast");
$("select").change(function(){
if($("#login").is(":selected")){
$("#loginselect").slideDown("slow");}
});
$("#remove").click(function() {
$("#loginselect").slideUp("slow");
});
$("#navselect").hide("fast");
$("select").change(function () {
if($("#nav").is(":selected")){
$("#navselect").slideDown("slow");}
});
$("#removenav").click(function() {
$("#navselect").slideUp("slow");});
</script>
Am I even on the right path?
You are on the right path, I think the problem is that you are not preventing the default action of the links, and so the page is being refreshed (causing you to see the div
s for a second). You can prevent the default action of a link by accepting an event
parameter and calling .preventDefault()
on it, i.e:
$("#remove").click(function(e) {
e.preventDefault();
$("#loginselect").slideUp("slow");
});
Here it is working: http://jsfiddle.net/XzDzb/
精彩评论