0

我的演示中有一个基本的 jQuery Accordion。我单击“关于我们”，它会在其下方显示“团队”链接。耶！

现在，是否可以让这个 Accordion 工作而不必在超链接中包含“item”类？

所以，而不是<a href="/about-us/" class="item">About Us</a>它只是<a href="/about-us/">About Us</a>？我问的原因是当前从 WordPress 生成的代码不包括“项目”类，因此破坏了我的手风琴。

这是我的演示：http: //jsfiddle.net/h32dj/

还有我的 JavaScript：

jQuery(function($) {

    $('#accordion a.item').click(function (e) {
    //remove all the "Over" class, so that the arrow reset to default
    $('#accordion a.item').not(this).each(function () {
    if ($(this).attr('rel')!='') {
    $(this).removeClass($(this).attr('rel') + 'Over');
    }
    $(this).siblings('ul').slideUp("slow");
    });

    //showhide the selected submenu
    $(this).siblings('ul').slideToggle("slow");

    //addremove Over class, so that the arrow pointing downup
    $(this).toggleClass($(this).attr('rel') + 'Over');
    e.preventDefault();
    });

});

非常感谢这里的任何指示:)

4

2 回答 2

1

好，我们来分析一下这个item类是如何在这个脚本中使用的。据我所知，需要以某种方式区分第一级锚（手风琴窗格）和第二级锚（内容）。如果您需要删除此类，则需要其他方法。例如，您可以依赖标记和标签层次结构。具体而不是按类选择器：

'#accordion a.item'

按层次结构使用选择器：

'#accordion > li > a'

这是演示。

于 2013-03-05T11:06:17.677 回答
0

如果没有 item 类，它将按照以下方式工作：

    jQuery(function($) {

    $('#accordion > li > a').click(function (e) {
    //remove all the "Over" class, so that the arrow reset to default
        $('#accordion a').not(this).each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over');
            }
        $(this).siblings('ul').slideUp("slow");
    });

    //showhide the selected submenu
    $(this).siblings('ul').slideToggle("slow");

    //addremove Over class, so that the arrow pointing downup
    $(this).toggleClass($(this).attr('rel') + 'Over');
        e.preventDefault();
    });

});

链接到 jsfiddle

于 2013-03-05T11:08:06.927 回答