Javascript jQuery显示/隐藏&；Css更改

我是jQuery的新手，对css很在行。 我有点问题。我想不出来

有一个链接，我想做一些事情时，点击如下

when
clicked -> sidebar:display:none; , content:margin-left:0;
clicked again -> sidebar:display:block, content:margin-left:250px;

if screen resolutions small then 760px
clicked -> sidebar:display:block; content:margin-left:250px;
clicked again -> sidebar:display:none; content:margin-left:0;

---

很像这样。

这是如何更改可见和边距：

$("#sidebar").click(function(){
    if($("#sidebar").css('display') == 'none' ){
        $("#sidebar").hide();
        $("#content").css( "margin-left", "0px" );
    }else {
       $("#sidebar").show();
       $("#content").css( "margin-left", "250px" );
    }
})

---

Jquery您可以使用

$('#element').toggle();

所以把它放在一个点击事件中

$('#buttonID').click(function() {
    $('#elementID').toggle()
});

为什么不使用css呢

HTML

<label for="toggle-1"> click me </label>
<input type="checkbox" id="toggle-1">  
<div class="Content"> Content</div>

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  cursor: pointer;
    border:none;
}

/* Default State */
.Content {
   background: green;
   width: 100px;
   height: 100px;
    margin-left:250px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ .Content {
   display: none;
   margin-left:0
}
@media (max-width: 760px) {
    .Content {
   background: green;
   width: 100px;
   height: 100px;
   display: none;
   margin-left:0px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ .Content {
   display: block;
    margin-left:250px;
}
}