Question

我现在有这个。我想在不使用函数的情况下实现hide / show的功能。是否可以使用

visibility:hidden

？请提供 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);
    });
});

Answer 1

我认为您可能正在寻找CSS属性

display: none;

和

display: block;

这就是jQuery在幕后所做的事情。

Answer 2

使用可见性，如果你不希望元素占用空间（不是真正的隐藏元素），你也需要将它放在绝对位置。

试试这个：

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

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

Answer 3

如果你想使用纯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>

以下是DEMO

Answer 4

试试这个：

#btn-toggle-menu:active + #menu-wrapper{
    display:none/block; 
}

不使用hide（）和show（）显示/隐藏

4 个答案: