Question

我有以下样本。我想通过更改CSS属性来实现。我该怎么办？

    <div id="btn-toggle-menu">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>

jQuery的：

    $('#menu-wrapper').hide();

    $('#btn-toggle-menu').on('click', function(e) {
    var menu = $('#menu-wrapper');
      if(menu.is(':hidden')) {
        menu.show();
      } else {
        menu.hide();
      }
  });

FIDDLE

Answer 1

尝试JQuery .toggle()

$( "#btn-toggle-menu" ).click(function() {
  $( "#menu-wrapper" ).toggle( "slow", function() {
    // Animation complete.
  });
});

Answer 2

Jquery的Hide＆amp; Show表现得像CSS的display:none＆amp; display: [the default display value of the element]

Working Fiddle ＆lt; - 最少的更改（我实际上会使用this）

Answer 3

尝试jquery

$( "#btn-toggle-menu" ).click(function() {
  $( "#menu-wrapper" ).toggle();
});

Answer 4

好的。

<div id="btn-toggle-menu">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>

这是你的代码？

使用jQuery，您可以选择哪个元素占用哪个属性。 jQuery实际上切换CSS属性。因此，一旦指定了正确的event element和css-property，您就可以实现所需的目标。

看看：

此处event将是click，其display移位的元素将为ul。

您想显示/隐藏ul。所以这可以做到这一点。

$('#btn-toggle-menu').click(function() { // on the click event
  $('#menu-wrapper').toggle(); // toggle would hide/show it. on its own :)
})

您可以在此处了解相关信息：http://api.jquery.com/toggle/

注意：您必须拥有此jQuery插件。确保jQuery事件发生。您可以在我提供的网站的页脚中下载该插件。祝你好运！

您的代码：

你的代码也很好，但它很长而且更像硬编码！

$('#menu-wrapper').hide();

$('#btn-toggle-menu').on('click', function(e) {
var menu = $('#menu-wrapper');
  if(menu.is(':hidden')) {
    menu.show();
  } else {
    menu.hide();
  }
});

这将首先看一下菜单，如果它隐藏了它会显示！否则隐藏它。这是好的和正确的！但是有点冗长，jQuery API可以帮助您轻松解决这个问题。使用他们的插件。从底部的链接下载，最新的插件将让您使用jQuery的所有最新功能。 :)

我在您的代码中编辑：

我刚从你的小提琴编辑了jQuery代码，结果就是这样：

fiddle。在这里我能够隐藏/显示div :)它只是一行代码！

不使用CSS显示/隐藏

4 个答案: