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

-1

我现在有这个权利。我想在不使用函数的情况下实现hide/show的功能。是否可以使用显示/隐藏不使用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); 
    }); 
});

来源

2013-09-24 Anusha Mallajosyula

请告诉我们，我们可以帮助你更好。如果你想隐藏但不删除，为不透明度设置动画 – mplungjan

你不在任何地方使用'.hide（）'或'.show（）'。你的解释并不清楚我.. –

@mplungjan如果我使用hide（）和show（）它打破了一些代码。我发布的代码只是一个示例。 –

我想你可能会寻找的CSS属性

display: none;

和

display: block;

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

来源

2013-09-24 06:58:59 howrad

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

来源

2013-09-24 07:02:12

我想onclick不悬停。 –

我已经更新了答案。请仔细检查工作演示...但是这只会使用鼠标按钮... 您必须使用一点脚本.... –

菜单不应该在mouseup上消失 –

试这个：

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

来源

2013-09-24 07:31:26

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

试试这个：

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-24 07:33:38 philwills

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

回答

相关问题