Question

我有以下代码，并尝试从外部链接打开手风琴面板。我从网站上得到了代码作为一个例子，它已经工作到现在为止，但我似乎无法弄清楚如何做到这一点。

jQuery的：

jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section content').slideUp(300).removeClass('open');
    }

    jQuery('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');

        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

HTML：

    <div class="accordion">
        <div class="accordion-section">
            <a class="accordion-section-title" href="#section-1">Section 1: </a>
            <div id="section-1" class="accordion-section-content">
                <p>Content goes here</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->

        <div class="accordion-section">
            <a class="accordion-section-title" href="#section-2">Section 2: </a>
            <div id="section-2" class="accordion-section-content">
                <p>Content goes here</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->

到目前为止，我已经尝试了外部链接：

<a href="#section-2.active">Link</a>

......和一些类似的东西但不幸的是没有欢乐。我也在使用jQuery，但也没有到达任何地方。

我没有太多使用jQuery的经验，而且我正在尝试学习它，所以请彻底解决任何问题以便我学习。非常感谢！

Answer 1

当页面加载时，您的ready函数将会运行，这应该会打开URI hash所指的手风琴部分：

jQuery(document).ready(function() {
    // get the #section from the URL
    var hash = window.location.hash; 
    // open accordion
    jQuery(hash).slideDown(300).addClass('open'); 
    // set title to active 
    jQuery(hash).prev('.accordion-section-title').addClass('active');
    /* ... the rest of your code here */
});

如果你没有两次获得jQuery对象，你可能会获得轻微的性能提升，你可以像这样链接这些：

    jQuery(hash).slideDown(300).addClass('open')
                .prev('.accordion-section-title').addClass('active');

从外部链接打开手风琴面板

1 个答案: