Question

每个搜索框都会在点击greennav时激活。我需要帮助使每个searchboxe切换掉，如果激活，而另一个'greennav'被点击（激活一个新的搜索框“）。我正在寻找的效果是活动的搜索框切换屏幕，而搜索框被激活导航切换到屏幕。目前我的代码一半工作。如果你单击序列：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/

您可以将此代码压缩很多，但我会故意将其与原始方法保持一致。

jquery为多个按钮切换

1 个答案: