[英]Display the div tag hidden content above the button on button click
I want to display the div tag hidden content above the button on button(Add Address) click and at the same time shift the button below the div tag content and again on cancel button click put the button to the original position. 我想在按钮(添加地址)上单击按钮上方显示div标签隐藏的内容,同时将按钮移至div标签内容下方,然后再次单击“取消”按钮将按钮置于原始位置。 I am doing the code in a .tpl file.
我正在.tpl文件中执行代码。
function addPickupAddress() { $("#addPickupAddressForm").show(); }
<div id="addPickupAddressForm" style="height:100px;display: none;"> <span style="font-size:20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2"> <tr> <td> Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"> </td> </tr> <tr> <td> First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"> </td> </tr> <tr> <td> Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"> </td> </tr> <tr> <td> Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"> </td> </tr> <tr> <td> State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"> </td> </tr> <tr> <td> PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"> </td> </tr> <tr> <td> Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"> </td> </tr> </table> </div> <button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;padding-top: 10px;cursor:pointer;float: left; margin-left:120px; margin-bottom:10px;" onclick="addPickupAddress();">Add Address</button>
Just remove the float
on the button and the fixed height
of your hidden div
, and the button will appear under the div as expected. 只需删除按钮上的
float
和隐藏div
的固定height
,按钮就会按预期显示在div下方。 To hide the div again, you can use jQuery's toggle()
function. 要再次隐藏div,可以使用jQuery的
toggle()
函数。 Also try not to use inline styles as it will make your code much less readable. 另外,请尽量不要使用内联样式,因为这会使您的代码可读性降低。
function addPickupAddress() { $("#addPickupAddressForm").toggle(); $("#addbuttonpickup").html($("#addbuttonpickup").html() == 'Cancel' ? 'Add Address' : 'Cancel'); }
button { color: white; background-color: #0899C9; padding: 5px; padding-top: 10px; cursor: pointer; margin-left: 120px; margin-bottom: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="addPickupAddressForm" style="display: none;"> <span style="font-size:20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2"> <tr> <td> Title</td> <td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"> </td> </tr> <tr> <td> First Name</td> <td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"> </td> </tr> <tr> <td> Last Name</td> <td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"> </td> </tr> <tr> <td> Address</td> <td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> Address2</td> <td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> City</td> <td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"> </td> </tr> <tr> <td> State</td> <td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"> </td> </tr> <tr> <td> PinCode</td> <td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"> </td> </tr> <tr> <td> Phone <span style="float: right;">+91</span> </td> <td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"> </td> </tr> </table> </div> <button type="button" id="addbuttonpickup" onclick="addPickupAddress();">Add Address</button>
Check following code. 检查以下代码。 Its implemented according to your requirement
根据您的要求实施
function addPickupAddress() { $("#addPickupAddressForm").show(); $("#cancelbutton").show(); $("#addbuttonpickup").hide(); } function hidePickupAddress() { $("#addPickupAddressForm").hide(); $("#cancelbutton").hide(); $("#addbuttonpickup").show(); }
.buttonstyle { color: white; background-color: #0899C9; padding: 5px; padding-top: 10px; cursor: pointer; float: left; margin-left: 120px; margin-bottom: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="addPickupAddressForm" style="display: none;"> <span style="font-size: 20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px; margin-left: 110px;" cellpadding="2"> <tr> <td>Title</td> <td><input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"></td> </tr> <tr> <td>First Name</td> <td><input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"></td> </tr> <tr> <td>Last Name</td> <td><input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"></td> </tr> <tr> <td>Address</td> <td><input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"></td> </tr> <tr> <td>Address2</td> <td><input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"></td> </tr> <tr> <td>City</td> <td><input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"></td> </tr> <tr> <td>State</td> <td><input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"></td> </tr> <tr> <td>PinCode</td> <td><input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"></td> </tr> <tr> <td>Phone <span style="float: right;">+91</span></td> <td><input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"></td> </tr> </table> </div> <button type="button" id="addbuttonpickup" class="buttonstyle" onclick="addPickupAddress();">Add Address</button> <button type="button" id="cancelbutton" class="buttonstyle" style="display:none" onclick="hidePickupAddress();">Cancel</button>
Try using the jquery toggle-function . 尝试使用jquery toggle-function 。 Look at this Pen to see how it's used: http://codepen.io/anon/pen/rrxYxq
查看此笔以查看其用法: http : //codepen.io/anon/pen/rrxYxq
function addPickupAddress ()
{
$("#addPickupAddressForm").toggle();
}
Also, the Button appears to be inside the form when it's visible because it's height is set to 100px but the children inside the element are actually higher. 另外,当按钮可见时,它似乎位于表单内部,因为它的高度设置为100px,但是元素内的子级实际上更高。 Remove it and the height will be calculated automatically.
删除它,高度将自动计算。
Replace Height 100px to 100% for display in full height. 将高度100像素替换为100%,以全高度显示。
And Put Cancel button in below div. 并在div下面放置“取消”按钮。
Try below code. 尝试下面的代码。
function addPickupAddress(isVisible) { if(isVisible){ $("#addPickupAddressForm").show(); $('#Cancelbuttonpickup').show(); } else{ $("#addPickupAddressForm").hide(); $('#Cancelbuttonpickup').hide(); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="addPickupAddressForm" style="height:100%;display: none;"> <span style="font-size:20px">Add Pickup Address</span> <table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2"> <tr> <td> Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title"> </td> </tr> <tr> <td> First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name"> </td> </tr> <tr> <td> Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name"> </td> </tr> <tr> <td> Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address"> </td> </tr> <tr> <td> City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name"> </td> </tr> <tr> <td> State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name"> </td> </tr> <tr> <td> PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode"> </td> </tr> <tr> <td> Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name"> </td> </tr> </table> </div> <button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;" onclick="addPickupAddress(true);">Add Address</button> <button type="button" id="Cancelbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;display:none;" onclick="addPickupAddress(false);">Cancel</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.