jquery - 使用 Jquery 通过单击移动相应的 Div

Question

在 Main Wrapper 中，我有 5 个 Div。第一个 div 包含 4 个 Box(box_1, box_2,box_3,box_4)，我的点击事件将在其中发生。

另外4个div在main wrapper里面，分别是box_1, box_2, box_3, box_4的内容。

当我单击“我的第一个框”时，单击事件应该为第一个 div(向右滑动)设置动画并且 box_1 div 应该向右滑动。

这是我到目前为止所做的 JS fiddle 链接。

http://jsfiddle.net/swapnaranjita_nayak/8XcZX/

我只添加了 box_1 id 向右滑动。我想为所有人编写一个通用代码。即如果我点击第二个框，第二个框 sd 从右边开始动画，如果我点击第三个框，第三个框应该从左边开始动画。

当我单击它们时，如何访问 4 个 Divs 的相应内容 div。注意:我已将一个单击事件附加到所有 4 个 div。

* 以上问题已解决**新问题，

我已经在每个 box_container 部分添加回菜单 href 链接。单击此超链接，将带我再次回到菜单部分，并带有向右滑动的动画效果。菜单部分将通过 slideleft 动画出现在窗口中。

下面的代码正在运行。

问题是当我点击任何框时，会出现相应的框容器。当我点击超链接选项“返回菜单”时，我什至返回到菜单部分。即 4 盒部分。问题从这里开始。如果我再次点击任何框，移动到相应的框容器。单击超链接返回，菜单(即 4 个框部分)从屏幕上消失了。

注意:这次警报会触发两次。

HTML

<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
    <div class="wrapper">
        <div class="row">
            <div class="box1" id="box_1"></div>
            <div class="box2" id="box_2"></div> <div class="clear"></div>
        </div>

         <div class="row">
            <div class="box3" id="box_3"></div>
            <div class="box4" id="box_4"></div> <div class="clear"></div>
        </div>

    </div>
</div><!---End of Container fluid--->

 <div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
     <h1>Box1 Content</h1>
     <a href="#" id="back1">Back to #Menu</a>
</div>
     <div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
     <h1>Box2 Content</h1>
      <a href="#" id="back2">Back to #Menu</a>
</div>
 <div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
     <h1>Box3 Content</h1>
      <a href="#" id="back3">Back to #Menu</a>
</div>
 <div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
     <h1>Box4 Content</h1>
     <a href="#" id="back4">Back to #Menu</a>
</div>

CSS

 .container_fluid {
    width:100%;
}
.wrapper {
    width:1208px;
    margin:auto;
}
.row {
    padding:3% 3% 3% 3%;
}
.box1 {
    height:100px;
    width:100px;
    background-color:red;
    margin-right:2%;
    float:left;
}
.box2 {
    height:100px;
    width:100px;
    background-color:green;
    margin-right:2%;
    float:left;
}
.clear {
    clear:both;
}
.box3 {
    height:100px;
    width:100px;
    background-color:black;
    margin-right:2%;
    float:left;
}
.box4 {
    height:100px;
    width:100px;
    background-color:brown;
    margin-right:2%;
    float:left;
}

JQUERY

    $("#back1,#back2,#back3,#back4").click(function(){
        alert($(this).attr('id'));
         $("#"+clicked_id+"_sec").animate({
            "marginRight":"-=170%"
         },
          {
            duration: 500,
            step: function() {
                console.log($(this).width());
            },
            complete: function() {

                 $("#"+clicked_id+"_sec").hide()
                        menu.show();
                          menu.animate({
                            "marginLeft":"+=150%"
                         },
                         {
                            duration: 500,
                            step: function() {

                            },
                            complete: function() {
                                 console.log("finished");
                            }
                         });
            }
         });
    });
});

Answer 1

将您的 box_1_sec 替换为

$("#"+clicked_id+"_sec")

这样就可以了