0

我有以下示例。我想通过更改 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();
      }
  });

小提琴

4

4 回答 4

1

试试JQuery .toggle()

$( "#btn-toggle-menu" ).click(function() {
  $( "#menu-wrapper" ).toggle( "slow", function() {
    // Animation complete.
  });
});
于 2013-09-24T06:07:16.217 回答
0

好的。

<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 elementand ，您想要的就可以实现css-property。

看一看：

这里的eventwill 是 a click，而要改变它的元素displaywill 是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 代码，结果如下：

小提琴。在这里我可以隐藏/显示 div :) 这只是一行代码！

于 2013-09-24T06:20:05.387 回答
0

Jquery 的 Hide&Show行为类似于 CSS 的display:none&display: [the default display value of the element]

Working Fiddle <-- 改动最少（我实际上会使用这个）

于 2013-09-24T06:07:44.613 回答
0

试试jquery

$( "#btn-toggle-menu" ).click(function() {
  $( "#menu-wrapper" ).toggle();
});
于 2013-09-24T06:14:56.933 回答