我希望当用户在文本框中单击鼠标输入文本时,div 展开以显示内容。我以前从未在任何地方见过这种情况。我知道如何使内容在单击时展开,但是有人可以指出我正在寻找的内容吗?
基本上,我有一个电子邮件注册框,我只想显示电子邮件地址的输入字段,但如果用户实际上决定进入电子邮件列表,该 div 将展开以询问他们的姓名和邮政编码。
谢谢!
我现在已经为电子邮件表单设置了 jquery,所以如果可能的话我想对此进行扩展:
编辑:这是我到目前为止所拥有的:
<div class="outeremailcontainer">
<div id="emailcontainer">
<?php include('verify.php'); ?>
<form action="emailform.php" method="post" id="sendEmail" class="email">
<h3 class="register2">Newsletter Signup:</h3>
<ul class="forms email">
<li class="email"><label for="emailFrom">Email: </label><input type="text" name="emailFrom" id="emailFrom name" value="<?= $_POST['emailFrom']; ?>" /><?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?></li>
<li class="buttons email"><button type="submit" id="submit">Send</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
</ul>
<div id="details">
Testing
</div>
</form>
<div class="clearing">
</div>
</div>
<script language="javascript" type="text/javascript">
$("#name").focus(function() {
$("#details").fadeIn();
});
$("#name").focus(function() {
$("#details").stop().fadeIn();
}).blur(function() {
$("#details").stop().fadeOut();
});
</script>
最佳答案
您可以使用 focus()
为此举办的事件。如果您想要多个元素使用类作为标记,并且需要 ID 来表示其他内容,请使用类作为标记。您可能需要添加 blur()
事件也是如此。假设标记:
<input type="text" id="name" class="info">
<div id="name_info" class="details">...</div>
使用 CSS:
div.details { display: none; }
这样做:
$(".info").focus(function() {
$(this.id + "_info").stop().fadeIn();
}).blur(function() {
$(this.id + "_info").stop().fadeOut();
});
stop()
call 对于停止 div 上当前正在运行的任何动画很有用,并且当您由于不同的事件而运行多个动画时,这是一个好习惯。
因此将此功能添加到任何输入元素:
- 提供您想要的任何 ID;
- 给它一个“信息”类;
- 创建
<div>
输入 ID 的 ID,末尾带有“_info”;和 - 给那个
<div>
一类“细节”。
现在您可能也想将其放置在输入元素旁边。如果是这样,请更改 CSS:
div.details { display: none; position: absolute; }
和 JavaScript:
$(".info").focus(function() {
var offset = $(this).offset();
var height = $(this).outerHeight();
$(this.id + "_info").attr({
top: offset.top + height + 5,
left: offset.left
}).stop().fadeIn();
}).blur(function() {
$(this.id + "_info").stop().fadeOut();
});
根据需要调整偏移。
关于javascript - 在文本框中点击时展开div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2445126/