Question

我手风琴菜单实际上完全符合我的所有需求。

$(document).ready( function() {
// initialize accordion
    $('.accordion ul').each(function() {
        var currentURI = window.location.href;
        var links = $('a', this);
        var collapse = true;
        for (var i = 0; i < links.size(); i++) {
            var elem = links.eq(i);
            var href = elem.attr('href');
            var hrefLength = href.length;
            var compareTo = currentURI.substr(-1*hrefLength);   
                if (href == compareTo) {
                    collapse = false;
                    break;
                }
            };
                if (collapse) {
                    $(this).hide();
                }
            });
        // on click, show this element and hide all others
        $('.accordion > li').click(function() {
            var me = $(this).children('ul');
            $('.accordion ul').not(me).slideUp();
            me.slideDown();
        });
    });


jQuery(document).ready(function($){
    // Get current url
    // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
    var url = window.location.href;
    $('.items a[href="'+url+'"]').addClass('active_page');
});

我把它放在这里：http://jsfiddle.net/Lzd5ogfe/

不幸的是，我无法将上面两个菜单项（第一项和第二项）设为＆＃34;真实＆＃34;如果菜单打开或折叠，则行为类似于较低的两个链接并实际切换。

此外，较低的片段也可以正常工作，但我想以某种方式将其包含在主脚本中..

我对JS不太熟悉:(

Answer 1

这是更新后的链接

http://jsfiddle.net/Lzd5ogfe/3/

<ul class="accordion">
<li>
    <a href="#">Item One</a>
    <ul class="items">
        <li><a href="one.html">One</a></li>
        <li><a href="two.html">Two</a></li>            
        <li><a href="three.html">Three</a></li>
        <li><a href="four.html">Four</a></li>
        <li><a href="five.html">Five</a></li>
        <li><a href="six.html">Six</a></li>
        <li><a href="seven.html">Seven</a></li>
        <li><a href="eight.html">Eight</a></li>
    </ul>
</li>
<li>
    <a href="#">Item Two</a>
    <ul class="items">
        <li><a href="one.html">ONE</a></li>
        <li><a href="two.html">TWO</a></li>
        <li><a href="three.html">THREE</a></li>
        <li><a href="four.html">FOUR</a></li>
        <li><a href="five.html">FIVE</a></li>
        <li><a href="six.html">SIX</a></li>
        <li><a href="seven.html">SEVEN</a></li>
    </ul>
</li>
<li>
    <a href="http://google.com">Item Three</a>
</li>
<li>
    <a href="http://google.com">IItem Four</a>
</li>

Answer 2

$(document).ready( function() {
    $('.accordion > li a').click(function(){
        $(".items").hide();
        $(this).next(".items").toggle();
    });
});

试试这个小提琴 http://jsfiddle.net/Lzd5ogfe/7/

用手风琴切换链接

2 个答案: