基于Selector帮助的JQuery SlideUP和SlideDown

时间:2011-06-29 22:38:47

标签: jquery menu selector slidedown slideup

我正在教自己jQuery并且很乐意尝试解决这个问题。我正在使用slideDownslideUp函数来显示不同的<div>并在需要时消失。但我的问题在于删除。我可以单独显示不同的选定选项,但是,当我尝试删除<div>中的一个<div>时,两个<div>都显示,<div>闪烁很快,然后都消失了。当<div>中只有一个显示时,也会发生这种情况。我点击删除链接,<div class="type-select" style="width:400px;"> <select name="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> 的两个快速闪烁然后消失。我真的不知道为什么。此代码背后的想法是允许用户根据需要添加和删除。如果错误地进行了选择,则用户可以将其删除,而先前选择的其他选择保持可见。这是我的代码:

{{1}}

我是否走在正确的道路上?

1 个答案:

答案 0 :(得分:1)

您走在正确的道路上,我认为问题在于您没有阻止链接的默认操作,因此页面正在刷新(导致您看到{{1一秒钟)。您可以通过接受div参数并在其上调用event来阻止链接的默认操作,即:

.preventDefault()

这里有效:http://jsfiddle.net/XzDzb/