jquery切換爲多個按鈕

Question

每個搜索框都會在點擊綠色按鈕時激活。我需要幫助，使每個搜索框的切換，如果活躍，而另一個'綠色'點擊（激活一個新的搜索框「）。我正在尋找的效果是積極的搜索框切換屏幕，而搜索框被激活如果你點擊序列：greennav，greennav2，greennav3和greennav4，激活工作，但是當greennav4激活時，你點擊greennav它不會激活效果並顯示相關的對話框。 。

$(document).ready(function() { 




    var green_norepeat = true; 
    var green2_norepeat = true; 
var green3_norepeat = true; 
    var green4_norepeat = true; 

function hide_all() { 

     if (green_norepeat == false) { $('#searchBox').animate({ width: 'toggle' }); } 
     if (green2_norepeat == false) { $('#searchBox2').animate({ width: 'toggle' }); } 
     if (green3_norepeat == false) { $('#searchBox3').animate({ width: 'toggle' }); } 
     if (green4_norepeat == false) { $('#searchBox4').animate({ width: 'toggle' }); } 

} 


$("#greennav").click(function() { 

    if (green_norepeat == true) { 
     hide_all(); 
     green_norepeat = false; 
     $('#searchBox').animate({ width: 'toggle' }); 

    } 
    else 
    { 
     green_norepeat = true; 
     $('#searchBox').animate({ width: 'toggle' }); 

} 
}); 




$("#greennav2").click(function() { 

    if (green2_norepeat == true) { 
     hide_all(); 
     green2_norepeat = false; 
     $('#searchBox2').animate({ width: 'toggle' }); 
    } 
    else 
    { 
     green2_norepeat = true; 
     $('#searchBox2').animate({ width: 'toggle' }); 

} 
}); 

$("#greennav3").click(function() { 

    if (green3_norepeat == true) { 
     hide_all(); 
     green3_norepeat = false; 
     $('#searchBox3').animate({ width: 'toggle' }); 
    } 
    else 
    { 
     green3_norepeat = true; 
     $('#searchBox3').animate({ width: 'toggle' }); 

} 
}); 

    $("#greennav4").click(function() { 

    if (green4_norepeat == true) { 
     hide_all(); 
     green4_norepeat = false; 
     $('#searchBox4').animate({ width: 'toggle' }); 
    } 
    else 
    { 
     green4_norepeat = true; 
     $('#searchBox4').animate({ width: 'toggle' }); 

} 
}); 

}); 

Answer 1

我改變了它了一下週圍，我認爲這是你在找什麼：

<button id="greennav1" >1</button><input id="searchBox1" style="display: none" /><br /> 
<button id="greennav2" >2</button><input id="searchBox2" style="display: none" /><br /> 
<button id="greennav3" >3</button><input id="searchBox3" style="display: none" /><br /> 
<button id="greennav4" >4</button><input id="searchBox4" style="display: none" /> 

$(document).ready(function() { 

    var btn_width = $('#searchBox1').width(); 
    hide([1,2,3,4]) 
    function hide(hide_ids){ 
     $.each(hide_ids, function(key, val){ 
      $('#searchBox'+val).animate({ width: 0 }, function(){$(this).hide()}); 

     }); 
    } 

    function show(show_ids){ 
     $.each(show_ids, function(key, val){ 
      $('#searchBox'+val).show().animate({ width: btn_width }); 
     }); 
    } 


    $("#greennav1").click(function() { 
     hide([2,3,4]); 
     show([1]); 
    }); 

    $("#greennav2").click(function() { 
     hide([1,3,4]); 
     show([2]); 
    }); 
    $("#greennav3").click(function() { 
     hide([1,2,4]); 
     show([3]); 
    }); 
    $("#greennav4").click(function() { 
     hide([1,2,3]); 
     show([4]); 
    }); 

}); 

看到提琴：http://jsfiddle.net/tqkLH/

你將能夠壓縮這個代碼相當多，但我保持它接近你的原有方法的目的。