基于手风琴高度的动画按钮位置

Question

我有两个按钮，一个在另一个之上，固定在页面的右侧。我拥有它，当用户点击顶部按钮时，它将内容向左滑动，并将第二个按钮设置为低于内容，以便用户仍可看到它。显示的内容实际上是具有可折叠面板的手风琴，因此当用户点击accordion-control按钮时，它隐藏当前显示的内容并显示请求的内容。

问题

根据手风琴内容在其上方的高度，仅当我选择一个accordion-control以打开和关闭第二个按钮移动。当我选择不同的accordion-control时，它将第二个按钮的position: top添加到页面的下方，而不是从position:top中减去，从而使其与上述内容保持一致。

目的

要使第二个按钮始终被定位手风琴内容上面下面，基于内容的高度，无论用户选择什么accordion-control。

的jsfiddle

https://jsfiddle.net/patrickmcd121/55am802a/2/

jQuery的手风琴功能

$(function() { 
    $('.accordion-control').click(function() { 
     if($(this).next('.accordion-panel').hasClass('active')) { 
      $('.active').removeClass('active').slideUp(); //if current accord-control is clicked twice 
     } else { 
      $('.active').removeClass('active').slideUp(); 
      $(this).next('.accordion-panel').addClass('active').slideDown(); 
     } 
}); 
}) 

jQuery来定位第二按钮

$('#faqSlider .accordion-control').click(function() { 

    var accord_panel = $(this).next('.accordion-panel'); 
    var accord_panel_height = accord_panel.outerHeight(); 

    console.log(accord_panel.text()); 

    if((!accord_panel.is(':visible')) && (!(accord_panel).is(':animated'))) { 
     $('#guideSlider, #guideSlider-button').animate({'top': '+='+(accord_panel_height)});  
    } else { 
     if (!(accord_panel).is(':animated')) { 
      $('#guideSlider, #guideSlider-button').animate({'top': '-='+(accord_panel_height)}); 
     } //carry on monday, issue with button below moving down 
    } 
}) 

---

<aside>   
<div id="faqSlider-button"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span>     
    <p class="no-margin-bottom">FAQ</p> 
</div> 

<div id="guideSlider-button"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span>     
    <p class="no-margin-bottom">Guide</p> 
</div> 
<div id="faqSlider"> 
    <ul class="accordion no-padding no-margin-bottom"> 
     <li> 
      <button class="accordion-control text-md-left">1. Lorem Ipsum</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">2. Lorem Ipsum</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">3. Lorem Ipsum</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
       </ul> 
      </div> 
     </li>         
    </ul> 
</div>     
<div id="guideSlider"> 
    <ul class="accordion no-padding no-margin-bottom"> 
     <li> 
      <button class="accordion-control text-md-left">1. Create your User Profile</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">2. Add the details of your Care Receivers (you can store up to four)</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">3. Create the profiles for your Responders (you can choose up to five for each Care Receiver)</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
       </ul> 
      </div> 
     </li>       
    </ul> 
</div> 

---

.accordion li { list-style: none; } 
.accordion button:focus { outline-color: #E6E8E3; } 
.accordion-panel li:before { 
content: url('../imgs/dash-point.png'); 
padding-right: 1rem; 
} 
.accordion-panel { display: none; padding: 1rem; background: #fff} 
.accordion-control { 
background: #fff; 
border: 1px solid #E6E8E3; 
padding: 1rem; 
width: 100%; 
} 

.accordion-control:hover, .accordion-control.active 
{ cursor: pointer; background: #eeeeee; } 

Answer 1

这是我的看法和你的问题的解决方案。

• 即进入了我的通知的第一件事是，一个element的bottom值的误计算[顶panel]，其具有被分配到对应的element [第二button]的top值。您在计算bottom的值时，加上#faqSlider的 - height和outerheight的button，简称为this，这会给您一些错误的数字，并将其设置为第二个button的top。
• 在第二个注意事项上，计算出错了，因为第号顶部panel的width和height和top的值会同时发生。所以在计算faq_slider_height时没有提取适当的值。
• 最后，你被存储的height和其的animation过程中改变，并因此相同的未反映在variables每次和保持恒定的值的全局faqSliderwidth。

---

上点1

分辨率要为任何element设置top值，参考其他bottom值element你需要计算的参考element的bottom值这将是$("#reference_element_id").offset().top + $("#reference_element_id").outerHeight()。

上点2

由于动画分辨率需要一些milliseconds内500 milliseconds或者你设置一些自定义的值大致完成，top值的计算和设定top值应几毫秒后进行。我在这里建议的最佳方法是使用setTimeout，最小值为300 milliseconds。

点3

的分辨率声明var faq_slider_width, faq_slider_height;全局和在某些变化更新它们的值。

结论

总结，以下是完整的第一button click event代码和updated fiddle

var faq_slider_width,faq_slider_height; 

$('#faqSlider-button').click(function() { 
    $('#faqSlider .accordion-panel').hide(300); 
    if($(this).css("margin-right") == (faq_slider_width)+"px" && !$(this).is(':animated')) {    
     $(this).removeClass('open'); 
     setTimeout(function(){ 
      faq_slider_width = $('#faqSlider').outerWidth();//get width automaticly 
      faq_slider_height = $('#faqSlider').outerHeight(); 
      $('#faqSlider, #faqSlider-button').animate({"margin-right": '-='+(faq_slider_width)}, 800, function() { 
       $('#guideSlider, #guideSlider-button').animate({'top': '10rem'}, 400); 
      }); 
     },300); 
    } else { 
     if(!$(this).is(':animated')) {//prevent double click to double margin 
      $(this).addClass('open'); 
      setTimeout(function(){ 
       faq_slider_width = $('#faqSlider').outerWidth();//get width automaticly 
       faq_slider_height = $('#faqSlider').outerHeight(); 
       $('#guideSlider, #guideSlider-button').animate({'top': (faq_slider_height + $("#faqSlider").offset().top + 20 + 'px')}, 300); 
       $('#faqSlider, #faqSlider-button').animate({"margin-right": '+='+(faq_slider_width)}, 800); 
      },300); 

     } 
    } 
});