jquery - 如何通过 URL 展开/取消折叠 FAQ (Bootstrap) 的特定面板

Question

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

我已尝试过这些网址中提供的解决方案

• 1st
• 2nd

但没有成功。

我的 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');
}