Question

我需要能够隐藏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。

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

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>

Answer 2

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

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

Answer 3

一种方法是在表单的子项上使用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>

Answer 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
}

隐藏表单属性，而不使用jQuery“隐藏” boostrap行col-4

4 个答案: