Question

我的页面上有两个引导行，两个按钮出现在屏幕顶部。我想，当点击第二个按钮时，第二行会出现在第一行的顶部，反之亦然这是我的两行

<div class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
           Text
    </div>
</div>

<div class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          Text 2
    </div>
</div>

我的按钮就是这样的

 <button class="regular mothers_day_first_button" id="mothers_day1">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2">Second row on top</button>

Answer 1

想法是在按钮中添加data-*属性，告诉他们哪个div可以推送到顶部。然后单击按钮，将其data-target-div属性中设置的div复制并将其从DOM中删除。现在，使用div

将克隆的prepend添加到主div中

$(function(){
  $('button.regular').on('click',function(){
     var $div = $($(this).data('target-div'));
     var clonedDiv = $div.clone();
     $div.remove();
     $('#mainDiv').prepend(clonedDiv);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<div id="firstDiv" class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
           Text 1
    </div>
</div>

<div id="secondDiv" class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          Text 2
    </div>
</div>
</div>


 <button class="regular mothers_day_first_button" id="mothers_day1" data-target-div="#firstDiv">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2" data-target-div="#secondDiv">Second row on top</button>

Answer 2

您好，因为在您的问题中，您已经问过Change position我发布此答案：请检查演示https://jsfiddle.net/7a4pqL1r/1/

<强> HTML

<button class="regular mothers_day_first_button" id="mothers_day1">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2">Second row on top</button>

<div class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
           ROW1
    </div>
</div>

<div class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          ROW2
    </div>
</div>

<强> CSS

.mothers_day-row-share , .mothers_day-row-create{
    height:100px;
    margin:10px;
    border:1px solid grey;
    width:100px;
    position:relative;
    color:#fff;

  }
 .mothers_day-row-share {
   background:red;
 } 

 .mothers_day-row-create {
   background:blue;
 }

<强>的jQuery

$(document).ready(function(){
    $('.mothers_day_second_button').on('click', function(){
  console.log('hi');
    $('.mothers_day-row-share').animate({top: "110px"}); 
    $('.mothers_day-row-create').animate({top: "-110px"});
  });

  $('.mothers_day_first_button').on('click', function(){
  console.log('hi');
    $('.mothers_day-row-create').animate({top: "0px"}); 
    $('.mothers_day-row-share').animate({top: "0px"});
  });
});

根据您单击的按钮更改两个引导行的定位

2 个答案: