开发者

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 divs 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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜