Question

我决定为此制作一个有效的jsfiddle示例，以便于提出建议。

我有一个自定义按钮可以切换列表。它基本上用作<select>输入，但实际上可以按照我需要的方式设置样式。我需要在我的jquery中写一些额外的逻辑，如果你点击一个新的，它会关闭任何其他打开的选择框。

我还有其他需要关闭选择框的场景。代码如下。

任何人都可以修改我的js以关闭当前被点击的选择框的.not（）吗？

Answer 1

如果您使用的是活动状态类，只需定位已经处于活动状态的选择框并将其关闭，然后继续执行其余操作

$(this).children('.btn.select').click(function(){

    $('.active').next('.options').slideUp('regular'); // Close the active one

    if ($(this).next('.options').is(':hidden')){
        $(this).next('.options').slideDown('regular');
        $(this).addClass('active');
    } else {
        $(this).next('.options').slideUp('regular');
        $(this).removeClass('active');
    }
    return false
});

我还会减少选择器的混乱和动画持续时间，只是为了使代码更漂亮和更清洁：

$(this).children('.btn.select').click(function(){   
    $('.options').slideUp(800); // Close the active one
    $options = $(this).next('.options');

    if ($(this).hasClass('active')){
        $options.slideDown(800);
        $(this).addClass('active');
    } else {
        $options.slideUp(800);
        $(this).removeClass('active');
    }
    return false
});

Answer 2

.not()是你的朋友。

$(this).children('.btn.select').click(function(){
    var btn = $(this);
    var opt = btn.next('.options');

    if (opt.is(':hidden')) 
    {
        opt.slideDown('regular');
        btn.addClass('active');

        $('.options').not(opt).
          slideUp('regular').
          removeClass('active');
    } 
    else 
    {
        opt.slideUp('regular');
        btn.removeClass('active');
    }
    return false
});

更新了小提琴：http://jsfiddle.net/LAr4E/3/

Answer 3

只需添加：

$('.options').slideUp('regular');

像：

$('.selectbox').each(function(){
    $(this).children('.btn.select').click(function(){
        $('.options').slideUp('regular');
        if ($(this).next('.options').is(':hidden')){
            $(this).next('.options').slideDown('regular');
            $(this).addClass('active');
        } else {
            $(this).next('.options').slideUp('regular');
            $(this).removeClass('active');
        }
        return false
    });
});

打开新的时关闭自定义选择框

3 个答案: