使用 jquery 隐藏表单属性而不“隐藏”boostrap 行 col-4答案

【问题标题】：hide a form attribute without "hiding" the boostrap row col-4 using jquery使用 jquery 隐藏表单属性而不“隐藏”boostrap 行 col-4
【发布时间】：2019-01-03 02:41:32
【问题描述】：

我需要能够隐藏 form1 而不是它占用的 col-4-md 引导空间。当我隐藏 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 这样的道具是我的一个想法，但 IE 不支持道具。另外，我什至不确定它是否会起作用，因为它可能仍然会隐藏 col-4。

我确信有一种简单的方法可以解决我正在尝试做的事情。先感谢您。

【问题讨论】：

使用 CSS 样式 Visibility.

标签： jquery html css bootstrap-4

【解决方案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>

【讨论】：

有趣的是，您在没有像其他人那样的可见性的情况下做到了。而你的也像实际的 papa johns 网站一样来回切换。我的错误是什么？谢谢你的回答！
在<form id='form1'> 上方添加一行<div class="col-4"> 很有意义，因为它们现在在技术上是分开的（但同时是一个）。我猜这就是你在不使用可见的情况下解决这个问题的方法。
您首先需要了解，引导程序中的网格实际上是如何工作的，请查看下面的链接。 getbootstrap.com/docs/4.2/layout/grid

【解决方案2】：

一种方法是在表单的子表单上使用toggle()，基本上是这样的：

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

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

但是，我将使用您必须获得更好的 Bootstrap 模板的骨架的编辑版本，请查看示例：

$(document).ready(function()
{
    $("#form2").hide();
});

$('#delivery_btn, #pickup_btn').on('click', function()
{
    $('#form1, #form2').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">

<div class="row">

  <div class="offset-1 col-4">
    <button class="btn btn-success btn-block" id="delivery_btn">
      Enter Delivery Address
    </button>
  </div>
  
  <div class="col-2 text-center">OR</div>

  <div class="col-4">
    <button class="btn btn-success btn-block" id="pickup_btn">
      Find Pickup Location
    </button>
  </div>

</div>

<div class="row">

  <div class="offset-1 col-4 mt-1">
    <form id='form1'>
      <div class="form-group">
        <label for="address">Enter Address</label>
        <input class="form-control" type="text" placeholder="Example: 123 Main St." id="address">  
      </div>
      <div class="form-group">
        <label for="zip">Enter Zip Code</label>
        <input class="form-control" type="text" placeholder="Enter Zip Code" id="zip">
      </div>
      <button type="submit" class="btn btn-info btn-block">
        Submit
      </button>
    </form>
  </div>

  <div class="offset-2 col-4 mt-1">
    <form id='form2'>
      <div class="form-group">
        <input class="form-control" type="text" value="Zip">
      </div>
      <button class="btn btn-warning btn-block" type="submit">
        Search
      </button>
    </form>
  </div>

</div>

</div>

【讨论】：

【解决方案3】：

您可以通过将表单的visibility 样式设置为hidden 或将opacity 设置为0 来实现。

$('#delivery_btn').toggle(function(){
    $('#form1').css({'visibility': 'hidden'});
}, function() {
    $('#form1').css({'visibility': 'visible'});
});

【讨论】：

【解决方案4】：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>

<div class="container-fluid">

<div class="row">

  <div class="col-md-5 col-xs-10">
    <button class="btn btn-success btn-block" id="delivery_btn">
      Enter Delivery Address
    </button>
  </div>

  <div class="col-md-2 col-xs-10 text-center"><h2>==OR==</h2></div>

  <div class="col-md-5 col-xs-10">
    <button class="btn btn-success btn-block" id="pickup_btn">
      Find Pickup Location
    </button>
  </div>

</div>

<div class="row">
  <div class="col-md-5 col-xs-10 mt-1">
    <form id='form1'>
      <div class="form-group">
        <label for="address">Enter Address</label>
        <input class="form-control" type="text" placeholder="Example: 123 Main St." id="address">  
      </div>
      <div class="form-group">
        <label for="zip">Enter Zip Code</label>
        <input class="form-control" type="text" placeholder="Enter Zip Code" id="zip">
      </div>
      <button type="submit" class="btn btn-info btn-block">
        Submit
      </button>
    </form>
  </div>

  <div class="col-md-2 col-xs-10 text-center"></div>

  <div class="col-md-5 col-xs-10 mt-1">
    <form id='form2'>
      <div class="form-group">
        <input class="form-control" type="text" value="Zip">
      </div>
      <button class="btn btn-warning btn-block" type="submit">
        Search
      </button>
    </form>
  </div>

</div>

</div>

<br><br><br>

<div class="control-group">
    <h1>Radio buttons</h1>
    <label class="control control--radio">First radio
      <input type="radio" name="radio" checked="checked"/>
      <div class="control__indicator"></div>
    </label>
    <label class="control control--radio">Second radio
      <input type="radio" name="radio"/>
      <div class="control__indicator"></div>
    </label>

  </div>

Javascript：

$(document).ready(function()
{
    $("#form2").hide();
});

$('#delivery_btn, #pickup_btn').on('click', function()
{
    $('#form1, #form2').slideToggle();
});

CSS：

.control-group{
  display inline-block
  vertical-align top
  background $color--white
  text-align left
  box-shadow 0 1px 2px rgba(0, 0, 0, 0.1)
  padding 30px
  width 200px
  height 210px
  margin 10px
}

.control {
  display block
  position relative
  padding-left 30px
  margin-bottom 15px
  cursor pointer
  font-size 18px
}

【讨论】：