jquery - 使用jquery隐藏没有 "hiding"引导行col-4的表单属性

Question

我需要能够隐藏 form1 而不是它占用的 col-4-md Bootstrap 空间。当我隐藏 form1 时，同一行中的 form2 被推过 4 列间距。一分钟的短视频可能是了解我正在尝试做的事情的最简单方式。

HTML 代码:

<div class="row">
  <div class="col-1"> </div>
<input type="submit" class="col-4 btn btn-success" id="delivery_btn" value="Enter Delivery Address"></input> 
<div class="col-2 center"> OR </div>
  <input type="submit" class="col-4 btn btn-success" id="pickup_btn" value="Find Pickup Location"></input>
<div class="col-1"> </div>
</div>

<div class="row">
    <div class="col-1"> </div>
    <form class="col-4" id='form1'>

      <label>Enter Address</label>
    <input type="text" placeholder="Example: 123 Main St."></input> <br>
  <label>Enter Zip Code</label>
    <input type="text" placeholder="Enter Zip Code"></input> <br>
    <input type="submit"></input>
</form> 
<div class="col-2"></div>

   <form class="col-4" id='form2'>
<input type="text" value="Zip"></input ><br>
    <input type="submit" value="search"></input>
</form> 
</div>

Jquery代码

$('#delivery_btn').on('click', function(){
  $('#form1').toggle();

});

$('#pickup_btn').on('click', function(){
  $('#form2').toggle();
});

使用类似 Changing .prop using jQuery does not trigger .change event 的 Prop 是我的一个想法，但 IE 不支持 prop。另外，我什至不确定它是否会起作用，因为它可能仍然会隐藏 col-4。

我相信有一种简单的方法可以解决我想做的事情。先感谢您。

Answer 1

html和jquery代码有点错误

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
	<div class="col-1"> </div>
	<input type="submit" class="col-4 btn btn-success" id="delivery_btn" value="Enter Delivery Address">
</input> 
<div class="col-2 center"> OR </div>
<input type="submit" class="col-4 btn btn-success" id="pickup_btn" value="Find Pickup Location"></input>
<div class="col-1"> </div>
</div>

<div class="row">
	<div class="col-1"> </div>
	<div class="col-4">
		
		<form id='form1'>
			<label>Enter Address</label>
			<input type="text" placeholder="Example: 123 Main St."></input> <br>
			<label>Enter Zip Code</label>
			<input type="text" placeholder="Enter Zip Code"></input> <br>
			<input type="submit"></input>
		</form> 
	</div>
	<div class="col-2"></div>
	<div class="col-4">
		<form id='form2'>
			<input type="text" value="Zip"></input ><br>
			<input type="submit" value="search"></input>
		</form> 
	</div>
</div>
<script type="text/javascript">
	$('#delivery_btn').on('click', function(){
		$('#form1').toggle();
		$('#form2').hide();
	});
  
	$('#pickup_btn').on('click', function(){
		$('#form2').toggle();
		$('#form1').hide();
	});

</script>