我怎样才能让它不移动而只在它下面加载?

时间:2010-04-23 15:43:59

标签: jquery html css

目前,如果您点击第2项,它将显示一个输入框并加宽<li>。我不希望它改变<li>的大小,我希望它在第2项下方打开。我怎样才能实现这一目标?此外,我想在打开后点击它,但我的jQuery似乎不起作用。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $('#menu').click(
            function() {  $('fieldset', this).slideDown(); }, 
            function() {  $('fieldset', this).slideUp(); });
    });
</script>

<style>
ul, li {
    float: right;
    display: inline;
    margin: 0px
    padding: 0px

}

</style>
</head>
<body>
<ul>
    <li>item 1  </li>
    <li id="menu">Item 2 
    <fieldset style="display: none;">
        <form>
            <input type="text">
        </form>
    </fieldset>


    </li>
    <li>Item 3</li>
</ul>



</body>
</html>

2 个答案:

答案 0 :(得分:1)

要隐藏该字段,请将代码中的click替换为toggle

答案 1 :(得分:0)

这种改变应该可以解决问题。

<li id="menu"> <div style="display:block">Item 2 </div>

    <fieldset id="field1" style="display: none;">
        <form>
            <input type="text">
        </form>
    </fieldset>


</li>

要关闭它,jquery命令将是

$('#menu').click(function(){
    $('#field1').hide();
});