jquery - 入力ボックスを使用すると.slideDown（）が正しく機能しない

Question

誰かが他を選択すると、追加の入力ボックスが下にスライドするフォームがあります。私の問題は、入力ボックスに何も入力しない場合を除いて、これはすべて機能することです。IE-最新バージョンで入力しようとしましたが、入力できます。Firefoxでも同じです。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スタイル。しかし、それでも葉巻はありません。

score 0 · Accepted Answer

問題の入力に影響を与えているこのページで何か他のことが起こっていると思います。ここでjsfiddleを作成し、Chromeのフィールドにデータを入力できます。私が提供したフィドルを試してみてください。それがうまくいく場合は、他に何かが起こっています。

jquery - 入力ボックスを使用すると.slideDown（）が正しく機能しない

1 に答える 1

Related

Reference