当子类处于活动状态时，在页面加载时打开可折叠的父类

问题描述 投票：0回答：1

我有一个 html 页面，其中有手风琴部分和按钮 

btn-acc-tab
。当用户单击按钮时，部分 
acc-tab
打开，每个部分都包含可以激活的链接 
tab-link
。这些部分使用如下所示的 JQuery 脚本打开和关闭。我试图通过添加类 
acc-tab collapse
来在页面加载时打开一个包含当前活动链接的部分 
show
，而不是等待用户单击。我在这里可以找到的大多数答案都涉及在单击或其他事件时激活 
show
类。简单地用 
event
代替 
onload
对我来说不起作用。我知道我错过了一些简单的东西，但我已经把头撞在墙上足够长的时间了，知道我自己不会看到它。我们将非常感谢您的帮助。

HTML 代码:

<div class="container">
    <div class="accordion" id="accordion_Foo">
        <div class="card">
            <div class="card-header" id="heading_Foo_Bar">
                <button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Bar" aria-expanded="true" aria-controls="collapse_Foo_Bar">
                    <h4>Foo Bar</h4>
                </button>
            </div>
            <div class="acc-tab collapse show" id="collapse_Foo_Bar" aria-labeledby="heading_Foo_Bar" data-parent="#accordion_Foo">
                <ul class="tab-list">
                    <li class="btn tab-link active" data-target="Cat" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
                        <a class="active" href="/Foo/Foo_Bar/Cat" target="_self">Cat</a>
                    </li>
                    <span class="sr-only">(current)</span>
                    <li class="btn tab-link" data-target="Dog" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Bar/Dog" target="_self">Dog</a>
                    </li>
                    <li class="btn tab-link" data-target="Mouse" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Bar/Mouse" target="_self">Mouse</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading_Foo_Foo">
                <button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Foo" aria-expanded="true" aria-controls="collapse_Foo_Foo">
                    <h4>Foo Foo</h4>
                </button>
            </div>
            <div class="acc-tab collapse" id="collapse_Foo_Foo" aria-labeledby="heading_Foo_Foo" data-parent="#accordion_Foo">
                <ul class="tab-list">
                    <li class="btn tab-link active" data-target="Bird" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="active" href="/Foo/Foo_Foo/Bird" target="_self">Bird</a>
                    </li>
                    <span class="sr-only">(current)</span>
                    <li class="btn tab-link" data-target="Fish" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Foo/Fish" target="_self">Fish</a>
                    </li>
                    <li class="btn tab-link" data-target="Dinosaur" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Foo/Dinosaur" target="_self">Dinosaur</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

jQuery 脚本:

(function ($) {
    $.fn.replaceClass = function (pFromClass, pToClass) {
        return this.removeClass(pFromClass).addClass(pToClass);
    };
}(jQuery));
function clickAndPress(event) {
    if(event.type === 'click'){
        return true;
    }
    else if(event.type === 'keypress'){
        var code = event.charCode || event.keyCode;
        if((code === 32)|| (code === 13)){
            return true;
        }
    }
    else{
        return false;
    }
};

$(".tab-link").on("click keypress", function(){
    if(clickAndPress(event) === true) {
        var id = $(this).data('target')
        var par_id = $(this).data('id');
        $(".tab-content").replaceClass("d-block", "d-none");
        $(".sr-only").remove();
        $(document.getElementById(id)).replaceClass("d-none", "d-block");
        $(".tab-link").removeClass("active");
        if ($(".btn-acc-tab").hasClass("active")) {
            $(".btn-acc-tab").removeClass("active");
        };
        $(this).addClass("active");
        $(document.getElementById(par_id)).addClass("active");
        $('<span class="sr-only">(current)</span>').insertAfter(".active");
    }
});
$(document).ready(function(){
    var active = $(".tab-link.active").data('target');
    $(".acc-tab").addClass("show");
});

还尝试过 jQuery：

$(this).closest(".btn-acc-tab").addClass("active");
html jquery dom dynamic parent-child
1个回答
0
投票

如果我正确理解你的问题，你想要的是将 

show
类添加到 
acc-tab collapse
元素，如果它至少有一个元素 
<li>
，并且在页面加载时具有 
active
类，对吧？如果是这样，我想你可以在 
$(document).ready(function(){})
函数中使用这段代码：

    $(".acc-tab").each(function() {
      if ($(this).find('li.active').length > 0) {
        $(this).addClass("show");
      }
    });

完整代码： 

(function ($) {
    $.fn.replaceClass = function (pFromClass, pToClass) {
        return this.removeClass(pFromClass).addClass(pToClass);
    };
}(jQuery));
function clickAndPress(event) {
    if(event.type === 'click'){
        return true;
    }
    else if(event.type === 'keypress'){
        var code = event.charCode || event.keyCode;
        if((code === 32)|| (code === 13)){
            return true;
        }
    }
    else{
        return false;
    }
};

$(".tab-link").on("click keypress", function(){
    if(clickAndPress(event) === true) {
        var id = $(this).data('target')
        var par_id = $(this).data('id');
        $(".tab-content").replaceClass("d-block", "d-none");
        $(".sr-only").remove();
        $(document.getElementById(id)).replaceClass("d-none", "d-block");
        $(".tab-link").removeClass("active");
        if ($(".btn-acc-tab").hasClass("active")) {
            $(".btn-acc-tab").removeClass("active");
        };
        $(this).addClass("active");
        $(document.getElementById(par_id)).addClass("active");
        $('<span class="sr-only">(current)</span>').insertAfter(".active");
    }
});
$(document).ready(function(){
    var active = $(".tab-link.active").data('target');

    $(".acc-tab").each(function() {
      if ($(this).find('li.active').length > 0) {
        $(this).addClass("show");
      }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
    <div class="accordion" id="accordion_Foo">
        <div class="card">
            <div class="card-header" id="heading_Foo_Bar">
                <button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Bar" aria-expanded="true" aria-controls="collapse_Foo_Bar">
                    <h4>Foo Bar</h4>
                </button>
            </div>
            <div class="acc-tab collapse" id="collapse_Foo_Bar" aria-labeledby="heading_Foo_Bar" data-parent="#accordion_Foo">
                <ul class="tab-list">
                    <li class="btn tab-link active" data-target="Cat" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
                        <a class="active" href="/Foo/Foo_Bar/Cat" target="_self">Cat</a>
                    </li>
                    <span class="sr-only">(current)</span>
                    <li class="btn tab-link" data-target="Dog" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Bar/Dog" target="_self">Dog</a>
                    </li>
                    <li class="btn tab-link" data-target="Mouse" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Bar/Mouse" target="_self">Mouse</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading_Foo_Foo">
                <button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Foo" aria-expanded="true" aria-controls="collapse_Foo_Foo">
                    <h4>Foo Foo</h4>
                </button>
            </div>
            <div class="acc-tab collapse" id="collapse_Foo_Foo" aria-labeledby="heading_Foo_Foo" data-parent="#accordion_Foo">
                <ul class="tab-list">
                    <li class="btn tab-link active" data-target="Bird" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="active" href="/Foo/Foo_Foo/Bird" target="_self">Bird</a>
                    </li>
                    <span class="sr-only">(current)</span>
                    <li class="btn tab-link" data-target="Fish" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Foo/Fish" target="_self">Fish</a>
                    </li>
                    <li class="btn tab-link" data-target="Dinosaur" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Foo/Dinosaur" target="_self">Dinosaur</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading_Foo_Foo">
                <button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Foo" aria-expanded="true" aria-controls="collapse_Foo_Foo">
                    <h4>Bar Foo</h4>
                </button>
            </div>
            <div class="acc-tab collapse" id="collapse_Foo_Foo" aria-labeledby="heading_Foo_Foo" data-parent="#accordion_Foo">
                <ul class="tab-list">
                    <li class="btn tab-link" data-target="Bird" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Foo/Bird" target="_self">Chicken</a>
                    </li>
                    <li class="btn tab-link" data-target="Fish" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Foo/Fish" target="_self">Cow</a>
                    </li>
                    <li class="btn tab-link" data-target="Dinosaur" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
                        <a class="" href="/Foo/Foo_Foo/Dinosaur" target="_self">Lamb</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.