在開關處再次展開摺疊的div

Question

我有一個摺疊的div，但在再次點擊切換按鈕時需要再次展開。 DEMO HERE

$(document).ready(function() { 
    $("#toggle").click(function() { 
     $("#sidebar").animate({ 
      left: '-55%' 
     }); 

    }); 
}); 

Answer 1

$(document).ready(function() { 
     $("#toggle").click(function() { 
     if($(this).hasClass('active')){ 
     $(this).removeClass('active'); 
     $("#sidebar").animate({ 
       left: '0%' 
     }); 
     }else{ 
     $(this).addClass('active'); 
     $("#sidebar").animate({ 
       left: '-55%' 
     }); 
     } 


     }); 
    }); 

嘗試這個js代碼。

http://jsfiddle.net/100pvu95/3/看到這裏

Answer 2

您可以使用此代碼 您必須聲明一個變量按鈕

的控制點擊

$(document).ready(function() { 
 
     var is_Clicked = false; 
 
     $("#toggle").click(function() { 
 
     if (is_Clicked) { 
 
      $("#sidebar").animate({ 
 
      left: '0' 
 
      }); 
 
      is_Clicked = false; 
 
     } else { 
 
      $("#sidebar").animate({ 
 
      left: '-55%' 
 
      }); 
 
      is_Clicked = true; 
 
     } 
 
     }); 
 
    });

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#header { 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    border: 1px solid; 
 
} 
 

 
#sidebar { 
 
    width: 70%; 
 
    height: 80%; 
 
    position: relative; 
 
    border: 1px solid; 
 
} 
 

 
#toggle { 
 
    width: 10%; 
 
    height: 40%; 
 
    margin-right: 6.5%; 
 
    margin-top: 3.5%; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="sidebar"> 
 

 
    SIDEBAR 
 
    <input type="button" value="Toggle" id="toggle"> 
 
</div>

Answer 3

我對我的jQuery有點模糊，但你可以做2個教學班，你想爲打開和關閉的CSS屬性，然後切換上.click()事件類

$(document).ready(function() { 
$("#toggle").click(function() { 
    $("#sidebar").toggleClass("close"); 

}); 
}); 

CSS

.open{ 
    width: 0px 
} 
.close{ 
    width: -70px; 
} 

只要確保申報.close class後.open class 所以它覆蓋.open class的屬性時，它的DIV添加到它

像這樣的事情應該工作，代碼可能需要一些調整，因爲我對我的jQuery有點生疏，但你去那裏。