Question

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
    $(".title").slideDown("medium");
});
</head>

<body>
<div class="booktitle">
    <p>
    <font color="red">*</font>Book:
    <select id="choosebook">
        <option>Choose a Book...</option>
        <option>Add new Book...</option>
    </select>
    <div class="title" style="display:none">**
        <font color="red">*</font>Title: <input type="text">
    </div>
    <font color="red">*</font>Page: <input type="text" class="page">
</div>
</body>
</html>

带有“标题”类的div仍占用“Book：”输入和“Page：”输入之间的空格，即使它被隐藏了！此网页上的其他div不会。在激活javascript以将其滑下之前，如何才能占用空间？

谢谢！

编辑：根据要求，这是问题的屏幕截图。我试图摆脱Book输入和Title输入之间的差距。在“标题”输入向下滑动之前： The stupid gap before the 'title' input slides down. 在'标题'输入向下滑动后： The stupid gap after the 'title' input slides down.

这是我的CSS：

<style type="text/css">
    @import url("layout.css");
    .page {
        width: 50px;
    }
    .URL, .booktitle {
        margin-left: 24px;
        display:none;
    }
    .title {
        display: none;
    }
    .newtag {
        display:none;
    }
    .amount, .addtag {
        width: 100px;
    }
    .details {
        width: 275px;
    }
</style>

Answer 1

这不是创造空间的div，而是你之后的<br>。

请取消<font>标签。我的眼睛在流血。

Answer 2

如果您正在谈论Book下拉下的巨大空间，那么这是因为您在HTML中打开了p标签，但忘记关闭它。 p标记正在添加默认边距。因此空间。删除p标记，边距应该消失。

另外，正如我在您的问题的评论中提到的，请始终向您的页面添加doctype。

Answer 3

不推荐使用font元素，请在此处使用span。您没有关闭脚本元素。

我清理了一下，现在你得到了这个：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
    $(".title").slideDown("medium");
});
</script>
</head>

<body>
<div class="booktitle">
    <span style="color:red">*</span>Book:
    <select id="choosebook">
        <option>Choose a Book...</option>
        <option>Add new Book...</option>
    </select>
    <div class="title" style="display:none">
        <span style="color:red">*</span>
        Title: <input type="text" />
    </div>
    <span style="color:red">*</span>
    Page: <input type="text" class="page">
</div>
</body>
</html>

你可以在这里看到小提琴：http://jsfiddle.net/Allan/cJ6Jq/适合我。

虽然显示：没有，div内的div仍占用空间？

3 个答案: