Question

当用户在文本框中单击鼠标以输入文本时，我想要展开div以显示内容。我以前没见过任何地方。我知道如何让事情扩展onClick，但有人能指出我正在寻找的东西吗？

基本上，我有一个电子邮件注册框，我只想显示电子邮件地址的输入字段，但如果用户实际上决定进入电子邮件列表，该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>

Answer 1

您可以使用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()调用可以阻止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();
});

根据需要调整偏移量。

Answer 2

您可以使用焦点而不是单击文本框。

$("#txtBoxID").focus(function(){
    $("#yourdivid").show("slow");
});

如果您想拥有slideDown效果，则可以使用slideDown

$("#yourdivid").slideDown("slow");

在文本框中使用点击时展开div？

2 个答案: