Question

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

问题

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

目标

根据内容的高度，使第二个按钮始终位于其上方的手风琴内容下方，无论用户选择何种$(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(); } }); })。

的jsfiddle

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

用于手风琴功能的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
    }
})

jQuery定位第二个按钮

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

std::vector<Members> members;

Answer 1

以下是我对您的问题的观察和解决方案。

我注意到的第一件事是，错误计算bottom [{1}}的{{1}}值必须分配给element相应panel [第二top]的值。您正在计算element值，方法是添加button＆＃39; s bottom和#faqSlider height，称为outerheight一些错误的数字，将设置为第二button的{{1}}。
在第二个音符上，计算出错了，因为动画会扩展this top的{{1}}和button的{{1}} width同时发生。因此在计算height时未获取正确的值。
最后，您要存储panel top button的全局值faq_slider_height，这些值在height期间发生变化，因此未反映在width每次faqSlider并保持不变。

第1点的决议

要为animation设置variables值，请参考其他top的{{1}}值，您需要计算参考element的{{1}}值这将是bottom。

第2点的决议

由于动画需要一些element大致完成bottom或您设置的某个自定义值，因此element值和设置$("#reference_element_id").offset().top + $("#reference_element_id").outerHeight()值的计算应在之后完成几毫秒。我建议的最佳方法是使用milliseconds，其最小值为500 milliseconds。

第3点的解决方案

全局声明top并在某些更改期间更新其值。

<强>结论

总而言之，这是完整的第一个top代码和 updated fiddle

setTimeout

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

1 个答案: