Question

我有一个带有<nav>标记的html表单。表格如下;

<section class="dropinput">
      <form id="add_task_form" class="addTaskForm" action="">
        <input type="text" id="add_task_name" class="addTaskInputFirst">
        <input type="submit" id="add_task_button" class="addTaskBtn">
        <nav>
          <input type="text" id="add_task_date" class="addTaskInputFirst imptdetail">
          <p class="date"></p>
          <input type="text" id="add_task_location" class="addTaskInputFirst imptdetail">
          <p class="location"></p>
        </nav>
      </form>
</section>

导航标签规则的控制如下;

如果所有文本字段都为空且鼠标在表单外，则<nav> </nav>内的文本字段将被滑动。

我有以下.js文件来做到这一点;

$('#add_task_form').focusout(function(){

if( (!$('#add_task_name').val()) && (!$('#add_task_date').val()) && (!$('#add_task_date').val()) )
    {
        $('.dropinput nav').slideUp(300);
    }

});

我认为我得到了正确的代码，但它不起作用。单击第一个字段时导航区域会正确打开，但在移动到其他文本字段后，如果我在add_task_name字段中没有输入任何内容，它会向上滑动。

你能帮我解决这个问题吗？任何帮助将不胜感激。

Answer 1

当你从第一个字段移动到其他输入字段时，你实际上是在做一个 focusout （来自表单），这就是fadeout发生的原因。

以下代码在页面加载时满足您的导航标记规则，但不确定这是否是您想要的...

$(document).ready(function() {
    if ($("#add_task_form input:focus").length == 0) {
        $("nav").slideUp(300);
    } else {
        // do what you need to do
    }
});

使用jquery滑动html表单不适用于已定义的控件

1 个答案: