0

我有一些 jQuery 代码的问题，我试图在表单中显示一些字段，但只有当用户单击是时它们才必须出现，并且当他单击否时隐藏。这有效但是当它显示字段时，它将它们安装在彼此的顶部。我试图给它方向，但没有工作。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<label> Do you want to create a new entry?  </label>
<button id="showr" type="button" >YES</button>
<button id="hidr" type="button" >NO</button>
<br/>

<div class="mydiv">
 <label> Field #1 
 <span class="small">Describe your field</span>
 </label>
 <textarea  rows="10" cols="40" name="" id=""  ></textarea>
</div>

<div class="mydiv">
 <label> Field #2
 <span class="small">Describe your field</span>
 </label>
 <textarea  rows="10" cols="40" name="" id=""  ></textarea>
</div>


<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});

$("#hidr").click(function () {
$("div").hide(1000);
});
</script>

</body>
</html>

相关的jsFiddle

如果有人有想法请告诉我，谢谢

4

2 回答 2

1

将此添加到您的样式中：

.mydiv{ clear:both;}

你说的方向是什么意思？

于 2013-04-25T15:13:39.920 回答
0

jsFiddle

要获得包括居中在内的所需结果，请使用以下 CSS：

.mydiv {
    background:#def3ca;
    margin: 0 auto;
    width:400px;
    text-align:left;
    clear:both;
    display: none;
}
.mytext {
    text-align:center;
}
.wrapper {
    display:block;
}

使用以下标记：

<div class="wrapper">
    <label>Do you want to create a new entry?</label>
    <button id="showr" type="button">YES</button>
    <button id="hidr" type="button">NO</button>
    <br/>
    <div class="mydiv">
        <label>Field #1 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
    <div class="mydiv">
        <label>Field #2 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
</div>

请注意，我在所有内容周围添加了一个包装器，display: block然后将其设置在您的边距中，因为.mydiv我将其设置为0 auto. 这允许居中。

我还对您的 jQuery 进行了一些改进。

$("#showr").click(function () {
    $(".mydiv").show("fast");
});

$("#hidr").click(function () {
    $(".mydiv").hide(1000);
});
于 2013-04-25T15:36:05.807 回答