Question

我有一个包含两个div的容器（col-md-4和col-md-8），并且我制作了一个JQuery动画，使左div（col-md-4）的数量为“ -65％”单击切换按钮时，marginLeft的大小。问题是另一个div（col-md-8）也在第一个div移动时也随之向左移动。有没有一种方法可以使第二个div（col-md-8）与第一个div（col-md-4）一起移动？基本上，我想做的是在单击按钮时隐藏并显示左div，但希望它移到第二个div上而不是它们在行中一起移动。希望我能正确解释我的要求。谢谢

HTML代码

<div id="row2" class="row justify-content-md-center">
                        <div id="listhide" class="col-md-4">
                            <div id="listhideinner" class="table table-striped">
                                <div id="output5"></div>
                                <div><button id="button">toggle</button></div>
                            </div>
                        </div>



                        <div id="figurerow" class="col-md-8">
                            <div id="pdfviewer" style="display:none" >
                                <h5 id="h5name" ></h5>
                                <iframe id="pdf" src="" style="width: 100%; height: 92%;" alt="pdf"></iframe>
                            </div>
                        </div>
                    </div>

动画

   var $div1 = $('#listhide')
$('#button').click(function() {
  $div1.toggleClass('isOut')
  var isOut = $div1.hasClass('isOut')
  $div1.animate({marginLeft: isOut ? '-35%' : '-65%'}, 300)
})

Answer 1

我已经解决了这个问题，我应该使用#listhideinner div而不是#listhide div，因为它是父div，而我们只想让子div移动。

动画（已更新）

   var $div1 = $('#listhideinner')
$('#button').click(function() {
  $div1.toggleClass('isOut')
  var isOut = $div1.hasClass('isOut')
  $div1.animate({marginLeft: isOut ? '-35%' : '-65%'}, 300)
})

引导列一起移动

1 个答案: