-1

我现在有这个。我想在不使用这些功能的情况下实现隐藏/显示的功能。是否可以使用

可见性：隐藏
? 请给我一个DEMO

HTML

<div id="btn-toggle-menu">Hide Menu</div>
<div id="menu-wrapper">
    <ul>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
        <li>link item</li>
    </ul>
</div>

JavaScript

$(document).ready(function() {
    $('#btn-toggle-menu').click(function() {
        var hidden = $('#menu-wrapper').data('hidden');
        $('#btn-toggle-menu').text(hidden ? 'Hide Menu' : 'Show Menu');
        if(hidden)
        {
            $('#menu-wrapper').animate({left: '20px' },500)
        } 
        else {
            $('#menu-wrapper').animate({
                left: '-210px'
            },500)
        }
        $('#menu-wrapper').data("hidden", !hidden);
    });
});
4

4 回答 4

1

使用可见性，如果您不希望元素占用空间（因为真正隐藏的元素不会），您还需要将其绝对定位。

尝试这个：

if(hidden) {
    $('#menu-wrapper').css({
        visibility: 'visible',
        position: 'fixed'
    });
} else {
    $('#menu-wrapper').css({
        visibility: 'hidden',
        position: 'absolute'
    });
}

http://jsfiddle.net/philwills/FWzAS/28/

于 2013-09-24T07:33:38.390 回答
1

我想你可能正在寻找 CSS 属性

display: none;

和

display: block;

这就是 jQuery 在幕后所做的。

于 2013-09-24T06:58:59.920 回答
0

尝试这个：

#btn-toggle-menu:active + #menu-wrapper{
    display:none/block; 
}
于 2013-09-24T07:31:26.613 回答
0

如果你想使用纯 css，你可以使用这样的东西..

CSS

 <style type="text/css">
  .show {display: none; }
  .hide:focus + .show {display: inline; }
  .hide:focus { display: none; }
  .hide:focus ~ #list { display:none; }
  @media print { .hide, .show { display: none; } }
</style>

HTML

  <div>
     <a href="#" class="hide">Hide Menu</a>
     <a href="#" class="show">Show Menu</a>
     <ul id="list">
        <li>Link Item 1</li>
        <li>Link Item 1</li>
        <li>Link Item 1</li>
     </ul>
  </div>

这是演示

于 2013-09-24T07:02:12.940 回答