關閉自定義選擇框，當打開一個新的

我已經決定做一個工作jsfiddle這個例子，以方便建議。關閉自定義選擇框，當打開一個新的

我有一個自定義按鈕，可以切換列表。它基本上起着<select>輸入的作用，但實際上可以按照我的需要進行樣式設計。我需要寫一些額外的邏輯到我的jquery中，如果你去點擊一個新的關閉任何其他打開的選擇框。

我有其他需要關閉選擇框照顧的情況。代碼如下。

的jsfiddle：working example here

任何人都可以修改我的js關閉任何是。不（）選擇框當前被點擊？

來源

2013-08-23 Sean

「任何人都可以修改我的js關閉任何是。不（）的當前正在點擊的選擇框？「...你的代碼有什麼問題嗎？ – Dom

如果您正在使用的工作狀態類只是針對已經激活的選擇框並關閉它下來，然後繼續做其餘的

$(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 
});

來源

2013-08-23 22:27:21 MacK

我將在這裏對第一個建議稍作修改。我還刪除了活動類並在if/else之前將選項向上滑動。我試圖清理選擇器混亂，但由於某種原因，這是行不通的。時間足夠單獨離開。 – Sean

.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/

來源

2013-08-23 22:25:28

只需補充一點：

$('.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 
    }); 
});

來源

2013-08-23 22:25:58 putvande

關閉自定義選擇框，當打開一個新的

回答

相關問題