-1

私は今これを持っています。関数を使用せずに非表示/表示の機能を実現したい。を使用することは可能ですか

可視性:非表示
? 親切に私にデモを提供してください

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

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 に答える