JQuery手风琴不会带回默认面板答案

【问题标题】：JQuery accordion won't bring back default panelJQuery手风琴不会带回默认面板
【发布时间】：2014-12-05 21:50:55
【问题描述】：

这不是一个 jQuery UI 手风琴，只是一个显示/隐藏脚本。它是一个链接列表，应该用相应的锚点切换 div。

我的问题是默认显示的第一个链接和初始 div 在隐藏后不会回来。这是我的javascript：

$('.active').click(function() {
    return false;
});
$('.ready').click(function() { 
    var accordionid = $(this).attr("href");

    // links are either 'active' or 'ready' 
    $('.active').removeClass('active').addClass('ready');
    $(this).removeClass('ready').addClass('active');

    // panels are have class 'showing' if they display
    $('.showing').slideToggle().removeClass('showing');
    $(accordionid).slideToggle().addClass('showing');  
    return false;
});

我在这里有一个小提琴可以显示我的问题：http://jsfiddle.net/g0e00L2p/

我希望这个脚本只在具有“就绪”类的链接上触发。但由于某种原因，它也会在具有“活动”类的链接上触发。

【问题讨论】：

标签： jquery jquery-ui-accordion

【解决方案1】：

由于您没有使用事件委托来监控对 DOM 的更改（通常通过 on() 方法完成），所以 jQuery 只知道您的元素，因为它在初始页面加载时看到它们。它不知道从 click 函数的角度来看，类已经发生了变化，它是一个静态对象。

所有的类切换都可以消除。 jQuery 会为您做到这一点。

$('#accordion li a').click(function (e) {
    var accordionid = $(this).attr("href");

    $('.resume-content').not(accordionid).slideUp();
    $(accordionid).slideDown();

    e.preventDefault();
});

Demo

请注意，我在 CSS 中添加了一个溢出语句来消除幻灯片跳转。

【讨论】：

我认为他上课是有原因的。他可能正在用 CSS 做点什么。
你可能是对的，但我见过不少新手程序员在不必要的时候这样做。
是的。 +1 overflow 修复！
啊，谢谢你，伊舍伍德！溢出语句是 .preventDefault 行吗？不知何故，我认为这与 return false 相同。
谢谢，伙计们。这两种解决方案都解决了我的问题。但我还是不明白为什么。如果我的脚本正在检查带有 .ready 的链接，为什么它会点击没有 .ready 的链接？并且作为默认面板的“Bio”链接确实有 .ready，但脚本没有触发。

【解决方案2】：

你只有 jQuery 检查.ready 而不是检查所有的链接。所以我会这样做：

HTML

将tabs_list 类添加到<ul>：

<ul class="tabs_list"> 
    <li><a href="#biography" class="active">biography</a></li>
    <li><a href="#activities" class="ready">Professional Activities</a></li> 
    <li><a href="#admissions" class="ready">Bar Associations</a></li> 
</ul>

jQuery

并检查 all <a> .tabs_list 的后代。单击.ready 时，确保每个人都转为.ready，而不仅仅是.active，而是转为$(this) .active。有意义吗？

$('.tabs_list a').click(function(){
    if($(this).hasClass('ready')) {
        $('.tabs_list a').removeClass('active').addClass('ready');
        $(this).removeClass('ready').addClass('active');

        var accordionid = $(this).attr("href");
        $('.showing').slideToggle().removeClass('showing');
        $(accordionid).slideToggle().addClass('showing')
    }
    return false;
});

更新jsFiddle

【讨论】：