0

ページでアコーディオンのショートコードが正常に機能していますが、コンテンツにアコーディオンの特定のパネルを開きたいリンクがある場合、機能しません。たぶん誰かが私の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>

4

2 に答える 2

0

私は次のように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>
于 2013-01-09T19:52:48.010 に答える
0

同じページのハッシュ リンクは、適切に設計されたブラウザーではページをリロードせず、通常はイベントをトリガーしません (これは js デバッガーで確認できます)。

フックする必要があると思いますwindow.onhashchanged。ただし、この方法は一部のブラウザー (Safaria および IE<8 IFRC) ではサポートされていないため、 jquery ハッシュ変更プラグインに興味があるかもしれません。

于 2013-01-08T00:01:58.713 に答える