.slideDown() 使用输入框时无法正常工作答案

【问题标题】：.slideDown() not working properly when using input boxes.slideDown() 使用输入框时无法正常工作
【发布时间】：2012-08-19 10:38:58
【问题描述】：

我有一个表单，当有人选择其他表单时，额外的输入框会向下滑动。我的问题是，所有这些都有效，除非我在输入框中输入任何内容。我已尝试在 IE 最新版本中执行此操作，并且我能够输入。火狐也一样。 Chrome 是它不工作的地方。当我进入开发工具（对于 Chrome）并关闭输入框中的值，然后重新打开时，我可以输入。

代码：这是我用于输入框的代码。我确实实现了脚本。

<div class="other">testing</div>

<input type="text" class="otherbox" />
<input type="text" class="otherbox" />

<input type="text" class="otherbox"/>
<script>
$(".other").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$(".otherbox").slideDown(1000,function(){
$(this).css("border", "2px red inset")
//.filter(".otherbox")
 //.css("background", "yellow")
 //.focus();
$(".other").css("visibility", "hidden");
});
});

</script>

CSS 代码：

.other { background:#cfd; margin:3px; width:50px; 
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
.otherbox { display:none; width:120px; float:left; 
margin:10px; }

已更新---------------------------------------------- ------------

<html>
<body>
        <div id="MainContainer">   
            <h2 align="center">
                <u></u>
           </h2>

         <div class="FormContainer">
            <form name="theform" action="insert.php" method="post" >
                <div class="CheckBoxContainer">
            <input type="checkbox" value"On" name="only-thisform"/>

            <br>
            <br>

            <input type="checkbox"  value="On" name="approval" id="approval"/>

            </div><!------------------------------------END   .CheckBoxContainer ------------------------------------------->
            <br>
            <br>


<script type="text/javascript"
     src="http://code.jquery.com/jquery-latest.min.js">
</script>   
<!-- javascript on client-side -->


<div class="DropDownSelector">

    <div class="DropdownDiscription"> </div>
</div> <!------------------------------------------END .DropDownSelector -------------------------------------------------------->

<br>
<div class="other">testing</div>

<input type="text" class="otherbox" />
<input type="text" class="otherbox" />

<input type="text" class="otherbox"/>
<script>
$(".other").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$(".otherbox").slideDown(1000,function(){
$(this).css("border", "2px red inset")
//.filter(".otherbox")
 //.css("background", "yellow")
 //.focus();
$(".other").css("visibility", "hidden");
});
});

</script>
<div class="FormBody">

    <div class="InputContainer">
<span class="InputDiscription">Insurance Company Name: </span><div class="InputInner"> <input type="text" name="compname" id="compname" ></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Insurance Phone number: </span><div class="InputInner"><input type="text"  name="phone" id="phone"></div><!----- END .InputInner ---------->


</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Policy Number: </span><div class="InputInner"><input type="text" name ="policynum" id="policynum"></div><!----- END .InputInner ---------->


</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Name of the Policyholder: </span><div class="InputInner"><input type="text" name="nameofPolicyholder" id="nameofPolicyholder"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">Policyholder mailing address: </span><div class="InputInner"><input type="text" name="mailing" id="mailing"></div><!----- END .InputInner ---------->


</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
<span class="InputDiscription">City: </span><div class="InputInner"><input type="text" name="city" id="city"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
    <div class="InputContainer">
    <!------------------------------------------STATE SELECTION CODE ------------------------------------------->

  <select name=<?=$name;?> id="state" onChange="submitform()">


<span class="InputDiscription">State: </span><div class="InputInner">

<input type="hidden" id="hiddenfield" name="hiddenfield" value="">
 </div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Zipcode: </span><div class="InputInner"><input type="text" name="zipcode" id="zipcode"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<br>
<div class="InputContainer">
<span class="InputDiscription">Year Of Vehicle: </span><div class="InputInner"><input type="text" name="YearOfVehicle" id="YearOfVehicle"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Make Of Vehicle: </span><div class="InputInner"><input type="text" name="MakeOfVehicle" id="MakeOfVehicle"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Model Of Vehicle: </span><div class="InputInner"><input type="text" name="ModelOfVehicle" id="ModelOfVehicle"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Vehicle Identification Number: </span><div class="InputInner"><input type="text" name="Vehicleid" id="Vehicleid"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Policy Effective Date: </span><div class="InputInner"><input type="text" name="Policyeffdate" id="Policyeffdate"></div><!----- END .InputInner ---------->


</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Policy Expiration Date: </span><div class="InputInner"><input type="text" name="Policyexpdate" id="Policyexpdate"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<br>
<h2>Employee Information</h2>

<div class="InputContainer">
<span class="InputDiscription">Employee Name: </span><div class="InputInner"><input type="text" name="EmployeeName" id="EmployeeName"></div><!----- END .InputInner ---------->


</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<br>
<div class="InputContainer">
<span class="InputDiscription">Employee Company Name: </span><div class="InputInner"><input type="text" name="EmployeeCompanyName" id="EmployeeCompanyName"></div><!----- END .InputInner ---------->


</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Agency/Franchise Number (or unique indicator): </span><div class="InputInner"><input type="text" name="Agency/FranchiseNumber" id="Agency/FranchiseNumber"></div><!----- END .InputInner ---------->



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="InputContainer">
<span class="InputDiscription">Todays Date: </span><div class="InputInner"><input type="text" name="TodaysDate" id="TodaysDate" value="



</div><!---------------------------------END .InputContaienr ----------------------------------->
<br>
<div class="CheckBoxContainer">
            <input type="checkbox" value"On" name="correct"/>The above printed name serves to identify the employee and shows intent of the employee that the above auto insurance information given is accurate.  

            <br>
            <br>

            <input type="checkbox"  value="On" name="agree" id="agree"/>The employee identified above confirms this document has been read, reviewed and understood and subsequently authorizes it as such. 

             <br>
             <br>
             <input type="checkbox"  value="On" name="understood" id="understood"/>The employee understands that if inaccurate information is discovered on the above auto insurance information table, on the employee's auto policy itself or if the auto insurance policy is cancelled for any reason, the employer will be notified. 

            </div><!------------------------------------END   .CheckBoxContainer ------------------------------------------->
            <br>




<input type="Submit" name="Submit" >

</div><!-------------------------------------------END .FormBody ------------------------------------------------------->
</form>


    </div><!--------------------------------------End .FormContainer ---------------------------------------------->

</div><!----------------------------------End #MainContainer----------------------------------->

</body>
</html>

更新---------------

我也只是尝试使用以下方法制作一个单独的 .php 文件：

<div class="other">testing</div>

<input type="text" class="otherbox" />
<input type="text" class="otherbox" />

<input type="text" class="otherbox"/>
<script>
$(".other").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$(".otherbox").slideDown(1000,function(){
$(this).css("border", "2px red inset")
//.filter(".otherbox")
 //.css("background", "yellow")
 //.focus();
$(".other").css("visibility", "hidden");
});
});

</script>

和 css 样式。但还是没有雪茄。

【问题讨论】：

最好做个小提琴

标签： jquery html

【解决方案1】：

我猜测此页面上发生的其他事情正在影响相关输入。我创建了一个 jsfiddle here，并且可以在 Chrome 中的字段中输入数据。试试我提供的小提琴，如果它适合你，还有其他事情发生。

【讨论】：

我有 php 代码 + 一些接受值并自动更新它们的 javascript 代码
是的，代码正在运行，但我不知道为什么它对我不起作用。我要更新文件
什么是 CSS 类，“otherbox”和“other”
用于输入框及其周围的div。
你能把生成的 HTML 放入而不是添加 PHP 吗？我这里没有 PHP 服务器。查看原始 HTML 会更容易找到问题。