Accordion JS不會打開哈希標籤鏈接

我有一個手風琴簡碼在我的頁面上正常工作，但是當我在內容中有一個鏈接時，我想在手風琴中打開一個特定的面板，它將無法工作。也許有人可以引導我編輯我的JS代碼？Accordion 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>

來源

2013-01-07 Ken

哈希同一頁面上的鏈接不會在設計良好的瀏覽器上重新加載頁面，並且通常不會觸發任何事件（可以使用js調試器進行檢查）。我想你需要掛鉤window.onhashchanged。但是這種方法不支持某些瀏覽器（Safaria和IE < 8 IFRC），所以你可能會喜歡jquery hash changed plugin

來源

2013-01-08 00:01:58 rds

我得到它的工作，我改變了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-09 19:52:48 Ken

Accordion JS不會打開哈希標籤鏈接

回答

相關問題