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

Question

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

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

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

jsFiddle：这里的工作示例

任何人都可以修改我的 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
    });
});