Accordion JS不会从标签链接打开

Accordion JS wont open from a hashtag link

本文关键字：链接 标签 JS Accordion      更新时间：2023-09-26

我有一个手风琴短代码工作在我的页面很好，但当我有一个链接的内容，我想在手风琴打开一个特定的面板它将不起作用。也许有人可以引导我在路径编辑我的JS代码?

/**
 * Main JavaScript
 */
// Document is loaded...
jQuery(document).ready(function($) {
        /******************************************
         * ACCORDION (Shortcode)
         **************************************/
        var accordion_active_class = 'accordion-active';
        // Loop each instance
        $('.accordion').each(function() {
            var accordion_wrapper = this;
            var sections = $('> section', accordion_wrapper);
            // Make sure only one active section on load
            var active_section_set = false;
            $(sections).each(function(index) {
                // Section is active
                if ($(this).hasClass('accordion-active')) {
                    // Another was already set
                    if (active_section_set) {
                        $(this).removeClass('accordion-active'); // hide section
                    }   
                    // Allow only one active section
                    active_section_set = true;
                }
            });
            // Click on section
            $('.accordion-section-title', sections).click(function() {
                var section = $(this).parent();
                // if clicked section was not self
                if (!$(section).hasClass(accordion_active_class)) {
                    // hide all section content
                    $('.accordion-content', sections).hide();
                    // show current section content
                    $('.accordion-content', section).hide().fadeTo(500, 1); // fadeTo looks better than fadeIn in IE7
                    // move active class to new active section
                    sections.removeClass(accordion_active_class);
                    $(section).addClass(accordion_active_class);                
                }
                // if it was self, close it
                else {
                    $('.accordion-content', sections).hide();
                    sections.removeClass(accordion_active_class);
                }
            });
        });
        // CSS fixes for IE8 which doesn't support :not or :last-child
        $('.accordion section .accordion-content > :last-child').css('margin-bottom', '0');
        $('.accordion section:not(.' + accordion_active_class + ') .accordion-content').hide(); 
        // Mysterious IE8 layout bug fix
        // http://stackoverflow.com/questions/3350441/dynamic-elements-are-not-appearing-in-ie8-until-there-is-a-mouse-click
        $('.accordion section').addClass('dummyclass').removeClass('dummyclass');
});
这是输出的HTML: 
<div class="accordion">
<section id="title1" class="">
<div class="accordion-section-title">Title 1</div>
<div class="accordion-content" style="display: none; opacity: 1;">
<p>This is some text.</p>
</div>
</section>
<section id="title2" class="">
<div class="accordion-section-title">Title 2</div>
<div class="accordion-content" style="display: none; opacity: 1;">
<p>This is some more text.</p>
</div>
</section>
</div>

最后这是我想要触发下拉菜单的链接的结构:

<a href="#title1">Title 1 - trigger</a>

同一页面上的散列链接不会在设计良好的浏览器上重新加载页面，并且通常不会触发任何事件(您可以使用js调试器检查这一点)。

我认为你需要钩上window.onhashchanged。但是这个方法不支持某些浏览器(safari和IE<8 IFRC)，所以你可能对jquery哈希改变插件感兴趣

我让它工作，我改变了JS如下:

jQuery(document).ready(function($) {
// ACCORDION
var accordion_active_class = 'accordion-active';
var sections = $('.accordion > section');   
var section_headings = $('.accordion > section .accordion-section-title');  
function scrollToSection(section) {
    $('html, body').animate({
        scrollTop: parseInt($(section).offset().top) - 10
    });
}
function openSection(section) {
    // if not already open
    if (!$(section).hasClass(accordion_active_class)) {
        // hide all section content
        $('.section-content', sections).hide();
        // show current section content
        $('.section-content', section).hide().fadeTo(500, 1); // fadeTo looks better than fadeIn in IE7
        // move active class to new active section
        sections.removeClass(accordion_active_class);
        $(section).addClass(accordion_active_class);
        // scroll there, because if a really big section was closed, things are still off
        scrollToSection(section);
    }
}   
section_headings.click(function() {
    var section = $(this).parent();
    // if clicked section is not active
    if (!$(section).hasClass(accordion_active_class)) {
        openSection(section);
    }
    // clicked section is active, collapse it
    else {
        // hide section content
        $('.section-content', sections).hide();
        // remove active class
        sections.removeClass(accordion_active_class);
    }
});
    // CSS fixes for IE7/8 which doesn't support :not or :last-child
    $('.accordion section  .section-content > p:last-child').css('margin-bottom', '0');
    $('.accordion section:not(.' + accordion_active_class + ') .section-content').hide(); 
    /* Scroll to and open section */
    $("a[data-rel^='openSection']").click(function(event) {
        // stop click action 
        event.preventDefault();
        /* which section? */
        var section = $($(this).attr('href'));
        /* open section */
        openSection(section);
        /* scroll to it */
        scrollToSection(section);
    });
// Scroll to section via hash tag
if(window.location.hash) {
    openSection(window.location.hash);
}
});

然后我添加了如下链接:

<a data-rel="openSection" href="#frequently-asked-questions">Frequently Asked Questions</a>
相关文章：