Question

如果我使用地址“www.xxxxxx.com/test.html#chgd”，第二支手风琴应该扩展。

我使用了此网站“Bootstrap 3 expand accordion from URL”的源代码，但它在此上下文中不起作用。

我不知道基于源代码的问题是什么，以便根据URL扩展第二个手风琴？

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link href="C:\Users\h\Desktop\test\bootstrap-theme.css" rel="stylesheet"/>
    <link href="C:\Users\h\Desktop\test\bootstrap.css" rel="stylesheet"/>

    <script src="C:\Users\h\Desktop\test\jquery-1.11.2.min.js"></script>
    <script src="C:\Users\h\Desktop\test\bootstrap.min.js"></script>
    <script>
        var url = document.location.toString();
        if (url.match('#')) {
            $('#' + url.split('#')[1]).addClass('in');
        }
    </script>
</head>

<body>
    <div id="accordion" class="accordion-group">
        <div class="panel">
            <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child
                Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
            <div id="cs_c" class="accordion-collapse collapse in">
                <p>...</p>
            </div>

            <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child
                Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
            <div id="chgd_c" class="accordion-collapse collapse">
                <p>...</p>
            </div>

            <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s
                and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
            <div id="wmnh_c" class="accordion-collapse collapse">
                <p>...</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

试试这个：

    <script>

    jQuery(document).ready(function() {
        var url = document.location.toString();
        if ( url.match('#') ) {
            var hash = url.split('#')[1];

            // collapse the expanded panel
            $('#accordion .accordion-collapse').removeClass('in');

            // expand the requested panel
            $('#' + hash + '_c').addClass('in');
        }
    });
    </script>

从网址

1 个答案: