如何show/hide div 基于动态按钮状态

Question

我有一个带有 6 个按钮（按钮 class“.course-accordion”）展开或折叠的手风琴。

在手风琴下方，我有一个 div（“collapse-bottom”），如果所有手风琴都折叠，我想隐藏它，但如果 1 个（或更多）打开，则可见。此 div 包含一个折叠所有按钮。

如果按钮 class 包含 'active'，我已经尝试 show/hide，如果手风琴内容的最大高度为 show/hide，我已经尝试 show/hide 0/100%。我似乎无法让它工作。

有什么想法吗？ jQuery 或 Javascript 在这里都可以。

示例代码标记：

<div class="course-wrapper">
<button class="course-accordion active">Course 01</button>
<div class="course-panel">Course Content</div>
</div>

<div class="course-wrapper">
<button class="course-accordion">Course 02</button>
<div class="course-panel">Course Content</div>
</div>

<div class="course-wrapper">
<button class="course-accordion">Course 03</button>
<div class="course-panel">Course Content</div>
</div>

<!-- I want this to be hidden unless one or all of the above accordions is active -->
<div class="expand-collapse">
    <a class="collapse-bottom">Collapse All</a>
</div>

Answer 1

这只是一些伪代码的示例（抱歉，自从我编写任何 JS 或 JQuery 以来已经有一段时间了，所以请忽略这是否有帮助，但我想也许我可以帮助获得你在正确的轨道上），但这可以通过多种方式实现。

通过设置一个计数器来跟踪手风琴的状态，每次单击一个手风琴按钮时，该计数器都会更新具有 class ==“活动”的手风琴 Div 的数量。

//然后“当”计数器大于或等于 1 时，显示隐藏/显示按钮。

希望对您有所帮助。我很高兴写出一些东西，但只是想为您提供一个快速而粗略的实现，以帮助您入门。但是，如果您正在寻找更具体的东西，那么我相信我或其他人会很乐意为您提供帮助。

Answer 2

您可以使用 hasClass() 来检查某个元素是否具有特定的 class。

这可以使用 jquery 来完成：

<div class="course-wrapper">
    <button class="course-accordion">Course 01</button>
    <div class="course-panel">Course Content</div>
</div>

<div class="course-wrapper">
    <button class="course-accordion">Course 02</button>
    <div class="course-panel">Course Content</div>
</div>

<div class="course-wrapper">
    <button class="course-accordion">Course 03</button>
    <div class="course-panel">Course Content</div>
</div>

<div class="expand-collapse">
    <a href="#" class="collapse-bottom">Collapse All</a>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>

    function check_accord() {
        //check if any button has class active and shows the collapse-bottom element 
        if ($(".course-accordion").hasClass("active")) {
            $(".collapse-bottom").show();
        } else {
            $(".collapse-bottom").hide();
        }
    }


    $(".course-accordion").click(function () {
        //toggles the active class of the clicked button
        $(this).toggleClass("active");
        check_accord();
    });

    $(".collapse-bottom").click(function () {
        //removes the active class from all the buttons when collapse bottom is clicked
        $(".course-accordion").removeClass("active");

        check_accord();
    });

    check_accord();  //executes the function each time the webpage is loaded

</script>

如何show/hide div 基于动态按钮状态

How to show/hide div based on dynamic button state

javascript

jquery

accordion