如何通过URL扩展/取消折叠常见问题解答（Bootstrap）的特定面板

Question

我使用引导程序3创建了FAQ page。我想通过URL扩展/取消折叠特定的问题面板。网址就像http://dailymotionfile.com/faqs#faq1

我已经尝试了这些URL中提供的解决方案

• 1st
• 2nd

但是没有成功。

MY HTML

<div class="panel-group" id="accordion">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#faq1">
            <span class="glyphicon glyphicon-plus"></span>
            How to download video from Dailymotion? </a>
            </h4>
        </div>
        <div id="faq1" class="panel-collapse collapse">
            <div class="panel-body">
            <a name="faq1"></a>
            1. Copy Page URL with a favourite <strong>video</strong> from your browser address bar;<br/>
            <br/>
            2. Paste Page URL into the site form (to <a href="http://dailymotionfile.com/">http://dailymotionfile.com</a>) and press "Get direct link";
            <br/>
            3. When your link (link to a file) will be found - press the link "Get direct link" (under the form) the right mouse button and select in the menu "Save link as..."
            <br/>
            4. Some of the dailymotion services do not provide you with the real name of the video file.<br/>
            So, you will need to rename a file before or after saving (for example: <strong>video.flv</strong>).<br/>
            Use for example: VLC Player for video playback (.flv and others). </div>
        </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#faq2">
        <span class="glyphicon glyphicon-plus"></span>
        What video formats can I download? </a>
        </h4>
    </div>
    <div id="faq2" class="panel-collapse collapse">
        <div class="panel-body">
        <a name="faq2"></a>
        You can download videos in FLV, MP4, WebM, MOV or 3GP (mobile) formats depending on the video provider.<br/>
        <br/>
        For example, you can download from Dailymotion in MP4 format.<br/>
        For Dailymotion videos in high quality - available MP4 video file in HD resolution (or Full HD - depends on a videoclip).
        </div>
    </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#faq3">
        <span class="glyphicon glyphicon-plus"></span>
        From what sites I can download video? </a>
        </h4>
    </div>

    <div id="faq3" class="panel-collapse collapse">
        <div class="panel-body">
        <a name="faq3"></a>
        <a href="http://dailymotionfile.com/">DailymotionFile.com</a> supports only Dailymotion links yet. </div>
    </div>
    </div>

</div>

Answer 1

您可以使用window.location.hash获取URL哈希并添加in类以通过getElementById(hash)进行切换

尝试以下代码。

if(window.location.hash)
{
    // hash found
    var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
    alert (hash);
    document.getElementById(hash).classList.toggle('in');
}

Answer 2

使用此类in类

<div id="faq2" class="panel-collapse collapse in">

在Bootstrap 4.0中，您需要添加show类代替in。