Question

我的手风琴短信代码在我的网页上正常工作但是当我在内容中有一个链接时，我想在手风琴中打开一个特定的面板，它将无法正常工作。也许有人可以引导我编辑我的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>

Answer 1

同一页面上的哈希链接不会在设计良好的浏览器上重新加载页面，并且通常不会触发任何事件（您可以使用js调试器进行检查）。

我认为你需要挂钩window.onhashchanged。但是某些浏览器（Safaria和IE＆lt; 8 IFRC）不支持此方法，因此您可能对jquery hash changed plugin

感兴趣

Answer 2

我得到了它的工作我改变了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>

Accordion JS不会从主题标签链接打开

2 个答案: