Question

目前，如果您点击第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>

Answer 1

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

Answer 2

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

<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();
});

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

2 个答案: