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

我有两个按钮，一个在另一个上面，固定在页面的右侧。我有这样的功能，当用户单击顶部按钮时，它会将内容滑出左侧，并将第二个按钮设置为内容下方的动画，以便用户仍然可以看到它。显示的内容实际上是带有可折叠面板的手风琴，因此当用户单击手风琴控制按钮时，它会隐藏当前显示的内容，并显示请求的内容

发行

仅当我选择一个手风琴控件打开和关闭时，第二个按钮才会根据其上方手风琴内容的高度移动。当我选择另一个手风琴控件时，它会添加到第二个按钮的位置：顶部，将其进一步向下推，而不是从位置：顶部中减去，从而使其与上述内容保持一致

瞄准

使第二个按钮始终位于其上方的手风琴内容下方，基于内容的高度，无论用户选择什么手风琴控件

JSFIDLE

用于手风琴功能的jQuery

jQuery来定位第二个按钮

---

以下是我对你问题的观察和解决方法

我注意到的第一件事是，元素[top panel]的底值计算错误，该元素必须分配给相应元素[second button]的顶值。您是通过添加滑块的高度和按钮的外观来计算底部值的，这会给您一些错误的数字，并且会设置到第二个按钮的顶部。 第二个注意事项是，计算出错，因为将扩展顶部面板的宽度和高度以及第二个按钮顶部的值的动画同时发生。因此，在计算faq\u滑块高度时未获取正确的值。 最后，您正在全局存储滑块的高度和宽度的值，这些值在动画过程中不断变化，因此，这些值不会每次都反映在变量中，并且保持不变。 关于第1点的决议

要设置任何元素的顶部值，通过引用其他元素的底部值，您需要计算引用元素的底部值，即$reference\u element\u id.offset.top+$reference\u element\u id.outerHeight

关于第2点的决议

由于动画大约需要几毫秒才能在500毫秒或您设置的某个自定义值内完成，因此top value和set top value的计算应在几毫秒后完成。我在这里建议的最佳方法是使用最小值为300毫秒的setTimeout

第3点的决议

声明变量faq\u滑块\u宽度、faq\u滑块\u高度；在某些更改期间，全局更新其值

结论

最后，这里是完整的第一个按钮单击事件代码和

---

你能试着把你的代码添加成代码片段或是提琴吗？因为当我试着用提琴复制它的时候，我无法把它和你在问题中提到的设计联系起来。。此外，请尝试在问题中为按钮命名[第二个和第一个]：。跟我说吧，我给你拿一杯威士忌好的，请。。完成后告诉我一个小问题。您想对齐第一个按钮下的第二个按钮或第一个按钮的div内容吗？非常感谢您花了这么多时间回答，并感谢您解释不同的分辨率。然而，它仍然有同样的问题，按钮被进一步按下页面，而不是停留在上面内容的底部。你在小提琴上看到你点击第一个按钮，内容显示了吗？然后第二个按钮向下移动，当你点击另一个选项卡时，向导按钮继续向下移动，我需要它粘到第一个按钮内容的底部。很抱歉，如果我让它听起来很复杂，请检查答案中指定的JSFIDLE。如果我能看到实际的内容，我会更有帮助的。我会结合你的方法继续工作。快到了。。。我希望如此。再次感谢。。。。如果最后还挣扎着的话，可以在一个小时内拜访你！！正如你所说，“认真阅读”。谢谢古鲁帕萨德·拉奥！我以为我随时都会失去理智伙计。。快乐编码..：

$(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();
        }
 });
})

$('#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; }

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);

        }
    }
});