Question

我有一个默认隐藏的Bootstrap行。单击特定按钮后，将调用jQuery toggle()以切换此行的显示。

有没有办法让该按钮动画下移？该按钮位于切换为显示/隐藏的行的下方。

#advancetoggle按钮应向下移动动画，如果我使用CSS＆＃39; s transition: transform(0,100px)按钮开始向下移动但由于上面的行获得了显示：块和它把按钮推得太远了。

谢谢：）

＆＃13;

$("#advancetoggle").click(function(event) {
  event.stopPropagation();
  $('#advanced-search').toggleClass('show hide');
  if ($('#adv-icon').hasClass('icon-arrowdown')){
    $('#adv-icon').removeClass('icon-arrowdown');
    $('#adv-icon').addClass('icon-arrowup');
  } else {
    $('#adv-icon').removeClass('icon-arrowup');
    $('#adv-icon').addClass('icon-arrowdown');
  }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <form id="advanced-search">
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="typeselect">Type</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="typeselect">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="basedin">Based in</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="basedin">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="town">Town</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="town">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <div class="btn btn-red">
        RESET FILTER
      </div>
    </div>
  </form>
</div>
<div class="row">
  <div class="advanced col-sm-2 col-xs-12">
    <a href="#" class="glyphdown" id="advancetoggle"><i class="icon-arrowdown" id="adv-icon"></i></a> <span class="advanced-text"> Advanced Search</span>
  </div>
</div>

＆＃13;

Answer 1

您的代码中存在一些问题：

transition: transform(0,100px)应为transform: translate(0,100px)。
要获得转换，您需要添加transition:all .3s ease（例如）。
将范围.advanced-text插入链接#advancetoggle

＆＃13;

$("#advancetoggle").click(function(event) {
  event.stopPropagation();
  $(this).css('transform', 'translate(0,100px)');
  console.log($(this));
  $('#advanced-search').toggleClass('show hide');
  if ($('#adv-icon').hasClass('icon-arrowdown')){
    $('#adv-icon').removeClass('icon-arrowdown');
    $('#adv-icon').addClass('icon-arrowup');
  } else {
    $('#adv-icon').removeClass('icon-arrowup');
    $('#adv-icon').addClass('icon-arrowdown');
  }
});

＆＃13;

#advancetoggle {
  display:inline-block;  
  transition:all .3s ease;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <form id="advanced-search">
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="typeselect">Type</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="typeselect">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="basedin">Based in</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="basedin">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="town">Town</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="town">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <div class="btn btn-red">
        RESET FILTER
      </div>
    </div>
  </form>
</div>
<div class="row">
  <div class="advanced col-sm-2 col-xs-12">
    <a href="#" class="glyphdown" id="advancetoggle">
      <i class="icon-arrowdown" id="adv-icon"></i>
      <span class="advanced-text">Advanced Search</span>
    </a> 
  </div>
</div>

＆＃13;

Answer 2

试试这个，我想这就是你想要的。这会有所帮助。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<style type="text/css">
	.myrow{
		display: none;
		margin: 10px;
	}

	.myrowtwo{
		display: none;
		margin: 10px;
	}

	.buttonone , .buttontwo{
		margin:10px;
	}
</style>
<body>

<div class="btn btn-default buttonone">Press me !</div>
<div class="row myrow">
	<div class="col-sm-3 col-xs-12">
      <label class="control-label" for="basedin">Based in</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="basedin">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="town">Town</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="town">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
</div><br>
<div class="clearfix"></div>
<div class="btn btn-primary buttontwo">Press me now!</div>
<div class="row myrowtwo">
	<div class="col-sm-3 col-xs-12">
      <label class="control-label" for="basedin">Based in</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="basedin">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <label class="control-label" for="town">Town</label>
      <div class="custom-select fa-caret-down">
        <select class="form-control" id="town">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
          <option value="four">Four</option>
          <option value="five">Five</option>
        </select>
      </div>
    </div>
</div>

<script type="text/javascript">
	$(document).ready(function(){
       $(".buttonone").click(function(){
       	$(".myrow").toggle();
       });

       $(".buttontwo").click(function(){
       	$(".myrowtwo").toggle();
       });
	});
</script>

</body>
</html>

＆＃13;

我使用过在线bootstrap和jquery.good运气。

下推内容

2 个答案: