手风琴，选项卡菜单，为两者分配选择类别 [英] accordion, tab menus, assign select class for both

问题描述

我有两个菜单:手风琴"菜单和标签"菜单，对于标签"菜单，有一个分配给打开的链接的已选择类，我想以相同的方式为open_menu分配类.手风琴菜单.实际上，如果类open_menu的条件是在其ul中有一个与Selected类的A链接，那会更好，因为为链接选择的类是从cookie中获取的，即使页面是刷新到此链接已选中.无论如何，您可以在这里看到所有源代码: http://jsfiddle.net/bq6tA/6/ 实际上，我想要的最终产品，在刷新页面后，将打开手风琴的标签，以及在该手风琴的标签中选择的Tab菜单链接

I have two menus: the Accordion menu and Tab menu, for the Tab menu, there is an assigned class selected to a link that is opened, I want to assign the class (for example) open_menu, in the same way for the accordion menu. actually if the class open_menu will be given from the condiotion that in its ul there is an A link with class Selected, it would be much better, because the class selected given to a link is taken from the cookies, and even if the page is refreshed it comes to this link Selected. Anyway, u can see all the source here: http://jsfiddle.net/bq6tA/6/ actually the end product i want, after the refresh of the page, there will be opened the accordion's tab, as well as the Tab's menu link selected that is in this accordion's tab

推荐答案

请参阅以下代码.

我已经修改了您的initMenu函数，将open_menu类添加到适当的手风琴中(并添加了CSS类来表明它是通过将背景更改为绿色来添加的):

I've modified your initMenu function to add the open_menu class to the appropriate accordion (and added a CSS class to indicate that it was added by changing the background to green):

function initMenu() {
    // SNIP ...
    $('#menu li a').click(function() {
        // SNIP ...
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal')
                                 .siblings('a').removeClass('open_menu');
            checkElement.slideDown('normal')
                        .siblings('a').addClass('open_menu');
            return false;
        }
    });
}

然后我创建了一个在initMenu之后调用的函数，该函数将触发与当前所选项目的id相同的rel的手风琴的点击:

I then created a function to be called after initMenu that will trigger a click on the accordion with the same rel as the id of the currently selected item:

function showCurrentTab() {
    var curId = $('.tabcontent:visible')[0].id,
        $curLink = $('a[rel="'+curId+'"]');

    $curLink.closest('ul')
            .parent('li')
            .children('a').click();
}

要弄清楚这里发生了什么，请参阅 closest ， parent 和 children 并将其与您的HTML结构相关.

To figure out what's going on here, see the API docs for closest, parent and children and relate that to your HTML structure.

这篇关于手风琴，选项卡菜单，为两者分配选择类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！