0

基本上我有一个带有 3 个选项和 3 个 div 的设置菜单，其中 2 个默认隐藏。整个事情在第一次点击时运行良好，它隐藏了正确的 div 并显示了正确的 div，同时从当前链接中删除了活动类并将其添加到被点击的链接中。但是，当我再次尝试单击不同的链接时，它会向下滑动正确的 div，但不会向上滑动另一个打开的 div。我被困住了。

代码：

html:

<ul class="nav nav-pills">
        <li class="settingLink active" data-tab="general"><a href="#">General</a></li>
        <li class="settingLink" data-tab="social" ><a href="#">Social</a></li>
        <li class="settingLink" data-tab="captcha"><a href="#">Captcha</a></li>
    </ul>

div：

<div id="generalSettings">
</div>
<div id="socialSettings">
</div>
<div id="captchaSettings">
</div>

JS：

function settingMenu(event)
{
$('.settingLink').bind('click', function(){
    //The tab value of the currently clicked element
    var tab = $(this).data('tab');
    //Current active element
    var current = $('.active, .settingLink').data('tab');

    //Slide the old div up
    $('#'+current+'Settings').slideUp('fast', function(){
        //Slide the new div down
        $('#'+tab+'Settings').slideDown();
    });

    //Remove active class from current link
    $('.active, .settingLink').removeClass('active');
    //Add active class to new link
    $(this).addClass('active');

});
}

先感谢您！

4

2 回答 2

2

没有逗号代替这个

$('.active, .settingLink')

尝试这个

$('.active.settingLink')

选择器

于 2012-10-24T20:05:56.760 回答
1

如果我没记错的话，这条线看起来像您想将 currentCliked 存储在当前权利中。如果它有两个类，那么你的选择器是错误的......

var current = $('.active, .settingLink').data('tab');

应该

var current = $('.active.settingLink').data('tab');

检查小提琴

分配事件处理程序而不是调用函数也是一种更好的做法，因为如果多次调用函数，则事件处理程序可能会重复。将事件附加到锚点而不是 li 的

于 2012-10-24T20:00:14.030 回答