Question

我有多个使用Bootstrap类面板制作的可点击面板，以这种方式组织：

例如，当我点击第一个面板时，会出现一些其他面板并且会发生很酷的事情。

但是我希望我点击的面板位于中心位置。然后，当单击相同的面板时，我想将所有内容恢复正常（现在可以使用每个面板的特定面板），包括主面板，因此它应该向左移动。中心的面板不需要动画，右边的面板应该动画到左边和右边。

这是面板的jQuery代码，比方说 panel 2 ：

//Panel 2
if ($("#panel_2").data("clicked")) {
    $(".navegadores").toggle(function () { });
} else {
    $(".navegadores").hide();
}

$("#panel_2").click(function () {
    $("#panel_2").data('clicked', true);
    $(".navegadores").toggle(function () { });
    console.log($("#panel_2").data("clicked"));
});

我觉得我需要以某种方式使用 .toggle 方法，或 .slideToggle ，但我很困惑atm。

Answer 1

这样的事情应该让你开始：

$('#panel2').click(function(){
   if ( $(this).data('clickstate') == 0 ){
     $(this).animate({
       marginLeft: '200px'
     },1000, function(){
        $(this).data('clickstate', '1');
     });
   }else{
     $(this).animate({
       marginLeft: '0'
     },1000, function(){
        $(this).data('clickstate', '0');
     });
   }
});

#panel2{position:relative;height:100px;width:100px;background:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="panel2" data-clickstate="0"></div>

如何在按下时将div设置为右边的动画，然后，当再次按下它时，使用jQuery将其返回到第一个位置？

1 个答案: