如何在一個Jquery移動頁面上從左到右滑動div

Question

我試圖在按鈕點擊Jquery移動頁面時從左向右滑動div。

我到底想要的是將當前div推到左側，並顯示另一個div，其內容類似於右側的某個菜單。我已經創建了JSfiddle。這裏是Updated Link

所以，如果你在擺弄看到每個列表div有一個gear按鈕，所以當你點擊這個按鈕，它應該只推格至左側，以顯示另一個DIV來回權呈現出一些菜單。

我有一個手繪的草圖，我包括這

HTML

<div data-role="page"> 
    <div id="clock" data-role="header" style=" background:skyblue;"> 
      <h1>List View</h1> 

    </div> 
    <!-- /header --> 
    <div role="main" class="ui-content" style=" background:orange;"> 
     <div class="fieldset" id="myform1">List 1 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a> 

     </div> 
     <div class="fieldset" id="myform2">List 2 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub1"></a> 

     </div> 
     <div class="fieldset" id="myform3">List 3 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub0"></a> 

     </div> 
    </div> 
    <div data-role="footer"> 
      <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
</div> 

腳本

$(document).ready(function() { 

    $("#sub2").click(function() { 
     // alert("This is an alert"); 
     $('#myform1').toggle('slide', { 
      direction: 'right' 
     }, 700); 
    }); 
}); 

謝謝

Answer 1

我試圖通過別人提供的意見幫助解決我自己的問題。這是解決方案。

雖然有點變化即我改變了div到li這一切

SCRIPT

$(".fieldset a").click(function() { 
    //var ul_parent= $('li.fieldset').parent(); 

//$(ul_parent).find('li').each(function(){ //code here }); 

    $('li.fieldset').each(function(){ 
     if ($(this).hasClass('rightSlide')) { 
     }else{ 
      var form = '#'+$(this).attr('id'); 
      var arr = form.split('_'); 
      var menu = '#menu_' + arr[1]; 
      var theClass = form; 
      console.log("The opened id : "+form); 
      toggle(form,menu,theClass); 

    } 
    }); 

    var form = '#'+$(this).closest('li').attr('id'); 
    var arr = form.split('_'); 
    var menu = '#menu_' + arr[1]; 
    var theClass = form; 
    toggle(form,menu,theClass); 
    // console.log(menu); 


    function toggle(form,menu,theClass){ 
    if ($(theClass).hasClass('rightSlide')) { 
     $(form).animate({ 
      "margin-left": "-200px", 
       "margin-right": "200px" 
     }, "slow").removeClass('rightSlide'); 
     $(menu).animate({ 
      "margin-right": "0px" 
     }, "slow"); 
    } else { 
     $(form).animate({ 
      "margin-left": "0px", 
       "margin-right": "0px" 
     }, "slow").addClass('rightSlide'); 
     $(menu).animate({ 
      "margin-right": "-200px" 
     }, "slow"); 

    } 
    } 

    //$('.hidenset').toggle(400); 
}); 

HTML

<div data-role="page"> 
    <div id="clock" data-role="header" style=" background:skyblue;"> 
      <h1>List View</h1> 

    </div> 
    <!-- /header --> 
    <div role="main" class="ui-content" style=" background:orange;"> 
     <ul> 
      <li class="fieldset rightSlide" id="myform_1">List 1 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a> 

      </li> 
      <li class="hidenset" id="menu_1">Menu 1</li> 
      <li class="fieldset rightSlide" id="myform_2">List 2 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a> 

      </li> 
      <li class="hidenset" id="menu_2">Menu 2</li> 
      <li class="fieldset rightSlide" id="myform_3">List 3 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a> 

      </li> 
      <li class="hidenset" id="menu_3">Menu 3</li> 
     </ul> 
    </div> 
    <div data-role="footer"> 
      <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
</div> 

CSS

.fieldset { 
    height:100px; 
    background:green; 
    width:100%; 
    margin-bottom: 2px !important; 
    margin-top: 2px !important; 
    color:white; 
} 
.hidenset { 
    background:red; 
    margin-top: -103px !important; 
    width:180px; 
    height:100px; 
    margin-bottom: 2px !important; 
    margin-right: -200px; 
    color:white; 
    /*display:none;*/ 
    float:right; 
} 
ul { 
    list-style-type: none; 
    padding-left: 0px; 
} 
.fieldset a { 
    float:right; 
    margin-right: 0px !important; 
    height: 21px !important; 
    width: 21px !important; 
    padding-right: 20px !important; 
    padding-left: 0px !important; 
} 

的UPDATED LINK爲JS小提琴