jquery点击4节动画

Question

我想要一个分成4个垂直部分的网页。 它们都宽25％，高100vh。 如果在一个区域中，单击该部分必须是70％，现在其他3 10％ 我的代码是：

$(document).ready(function() { 
    $("#profile").click(function() { 
     $(this).toggleClass('bigsection'); 
     $("#info").toggleClass('smallsection'); 
     $("#cv").toggleClass('smallsection'); 
     $("#portfolio").toggleClass('smallsection'); 

    }); 
    $("#info").click(function() { 
     $(this).toggleClass('bigsection'); 
     $("#profile").toggleClass('smallsection'); 
     $("#cv").toggleClass('smallsection'); 
     $("#portfolio").toggleClass('smallsection'); 
    }); 
    $("#cv").click(function() { 
     $(this).toggleClass('bigsection'); 
     $("#info").toggleClass('smallsection'); 
     $("#profile").toggleClass('smallsection'); 
     $("#portfolio").toggleClass('smallsection'); 
    }); 
    $("#portfolio").click(function() { 
     $(this).toggleClass('bigsection'); 
     $("#info").toggleClass('smallsection'); 
     $("#cv").toggleClass('smallsection'); 
     $("#profile").toggleClass('smallsection'); 
    }); 
}); 

它，你点击一个DIV，比点击同一div关闭工作，只要它先打开另一个。 但如果你点击一个div，然后点击另一个div，它将无法正常工作。 在此先感谢。

Answer 1

回答我自己的问题与此：

var $a = 0; 
$("#info").click(function() { 
    if ($a == 0) { 
     $("#info").addClass('bigsection'); 
     $("#cv").addClass('smallsection'); 
     $("#portfolio").addClass('smallsection'); 
     $(".buttoninfo").html("Close"); 
     $a = 2; 
    } 
    else if ($a == 2) { 
     $("#info").removeClass('bigsection'); 
     $("#cv").removeClass('smallsection'); 
     $("#portfolio").removeClass('smallsection'); 
     $(".buttoninfo").html("Open"); 
     $a = 0; 
    } 
    else if ($a == 3 || $a == 4) { 
     $("#info").addClass('bigsection'); 
     $("#info").removeClass('smallsection'); 
     $("#cv").removeClass('bigsection'); 
     $("#cv").addClass('smallsection'); 
     $(".cvsection").removeClass('block'); 
     $(".cvsection").addClass('none'); 
     $("#portfolio").removeClass('bigsection'); 
     $("#portfolio").addClass('smallsection'); 
     $(".buttoncv").html("Open"); 
     $(".buttonportfolio").html("Open"); 
     $(".buttoninfo").html("Open"); 
     $a = 2; 
    } 
}); 
$("#cv").click(function() { 
    if ($a == 0) { 
     $("#info").addClass('smallsection'); 
     $("#cv").addClass('bigsection'); 
     $("#portfolio").addClass('smallsection'); 
     $(".cvsection").removeClass('none'); 
     $(".cvsection").addClass('block'); 
     $(".buttoncv").html("Close"); 

     $a = 3; 
    } 
    else if ($a == 3) { 
     $("#info").removeClass('smallsection'); 
     $("#cv").removeClass('bigsection'); 
     $("#portfolio").removeClass('smallsection'); 
     $(".cvsection").removeClass('block'); 
     $(".cvsection").addClass('none'); 
     $(".buttoncv").html("Open"); 
     $a = 0; 
    } 
    else if ($a == 2 || $a == 4) { 
     $("#info").removeClass('bigsection'); 
     $("#info").addClass('smallsection'); 
     $("#cv").addClass('bigsection'); 
     $("#cv").removeClass('smallsection'); 
     $(".cvsection").removeClass('none'); 
     $(".cvsection").addClass('block'); 
     $("#portfolio").removeClass('bigsection'); 
     $("#portfolio").addClass('smallsection'); 
     $(".buttoninfo").html("Open"); 
     $(".buttonportfolio").html("Open"); 
     $(".buttoncv").html("Close"); 
     $a = 3; 
    } 

}); 
$("#portfolio").click(function() { 
    if ($a == 0) { 
     $("#info").addClass('smallsection'); 
     $("#cv").addClass('smallsection'); 
     $("#portfolio").addClass('bigsection'); 
     $(".buttonportfolio").html("Close"); 
     $a = 4; 
    } 
    else if ($a == 4) { 
     $("#info").removeClass('smallsection'); 
     $("#cv").removeClass('smallsection'); 
     $("#portfolio").removeClass('bigsection'); 
     $(".buttonportfolio").html("Open"); 
     $a = 0; 
    } 
    else if ($a == 2 || $a == 3) { 
     $("#info").removeClass('bigsection'); 
     $("#info").addClass('smallsection'); 
     $("#cv").removeClass('bigsection'); 
     $("#cv").addClass('smallsection'); 
     $(".cvsection").removeClass('block'); 
     $(".cvsection").addClass('none'); 
     $("#portfolio").addClass('bigsection'); 
     $("#portfolio").removeClass('smallsection'); 
     $(".buttoncv").html("Open"); 
     $(".buttoninfo").html("Open"); 
     $(".buttonportfolio").html("Close"); 
     $a = 4; 
    } 
}); 

我只觉得会有一个简单的解决了这一点。