使用JQuery显示一个带有slideup和slidingown的隐藏div

时间:2013-01-21 18:24:51

标签: javascript jquery html css

我已经制作了这个表单,当用户从我的选择表单中选择“是”时,会显示某些选项。我无法得到我隐藏显示的div,但我已经使用了Console,发现至少将select更改为yes确实会使我的if语句运行。我已经运行了测试,JQuery正在运行,但是

任何人都可以帮我确定我哪里出错吗?

    <form method="post" action="quizcreatescript.php" name="quizcreateform" id="quizcreateform">

            <select name="choosemarks" id="choosemarks">
                       <option value="noweights">No</option>
                       <option value="yesweights">Yes</option>      
                </select>

<!-- >This div is hidden until the user selects yes to add own marks<-->        
<div class="hide" id="hiddendiv1"><!-- this select box will be hidden at first -->
<div class="input select">      
<input type="text" name="quizcorrectaward" id="quizcorrectaward"><br>   
<input type="text" name="quizincorrectaward" id="quizincorrectaward"><br>       
</div>  
</div>

<script type="text/javascript">         
$("#choosemarks").change(function(){ // when #choosemarks changes 
if ($(this).val() == "yesweights" ) { // if user selects to add own marks $(".hiddendiv1").slideDown("fast"); // if yes show the hidden div

                                    }  
else { $(".hiddendiv1").slideUp("fast");    //otherwise, hide the div again.

                                    }
                                });
</script>

                         <input type="submit" name="createthequiz" id="createquiz" value="Create Quiz">
                    </form>

CSS表格有

.hide {
    display:none;
}

1 个答案:

答案 0 :(得分:3)

此:

$(".hiddendiv1")

不选择此元素:

<div class="hide" id="hiddendiv1">

就是这样:

$("#hiddendiv1")

使用#代表ID,.代表类,它可能有效吗?

FIDDLE