Question

这不是一个jQuery UI手风琴，只是一个show / hide脚本。它是一个链接列表，用于切换具有相应锚点的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/

我希望这个脚本只针对具有'ready'类的链接。但由于某种原因，它也会触发具有“主动”类的链接。

Answer 1

由于您没有使用事件委派来监视对DOM的更改（通常通过on（）方法完成），因此jQuery只知道您在初始页面加载时看到的元素。从单击函数（一个静态对象）的角度来看，它们没有意识到这些类已经发生了变化。

可以消除所有类切换。 jQuery为你做到了。

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

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

    e.preventDefault();
});

Demo

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

Answer 2

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

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

并检查{{1>}的所有 <a>后代。点击.tabs_list后，请确保所有人.ready，而不仅仅是.ready的所有人，而是.active $(this)。有意义吗？

.active

更新了jsFiddle

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

2 个答案:

HTML

的jQuery