Question

我只是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;

非常喜欢这个。

Answer 1

我建议你阅读jQuery文档。

例如，这篇文章很有价值： http://api.jquery.com/toggleClass/

因此，您可以在css中创建2个类，并使用addClass / removeClass / toggleClass方法在它们之间切换。

Answer 2

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

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

Answer 3

Jquery你可以使用

轻松地通过ID隐藏元素

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

所以把它放在点击事件中

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

Answer 4

为什么不使用css

HTML

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

CSS

/* 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;
}
}

Fiddle Here

jQuery Show / Hide＆amp; Css变化

4 个答案: