4 
<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>

带有“title”类的 div 仍然占用“Book:”输入和“Page:”输入之间的空间，即使它是隐藏的！此网页上的其他 div 没有。在激活 javascript 以将其向下滑动之前，如何使其不占用空间？

谢谢！

编辑：根据要求，这是问题的屏幕截图。我正在尝试消除 Book 输入和 Title 输入之间的差距。'title' 输入下滑前： “标题”输入之前的愚蠢差距向下滑动。 'title' 输入下滑后： “标题”输入后的愚蠢差距向下滑动。

这是我的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>
4

3 回答 3

7

创造空间的不是 div，而是<br>你紧随其后的 div。

并且请摆脱<font>标签。我的眼睛在流血。

于 2012-04-23T06:49:15.413 回答
1

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

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

于 2012-04-23T07:27:09.990 回答
0

不推荐使用字体元素，请在此处使用 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/为我工作。

于 2012-04-23T07:03:08.333 回答