Question

所以我有一个显示菜单的链接。当该菜单可见（展开）时，我需要让背景变暗。所以这就是我想要的。

if($('.expanded').html){
  $('nav').css("height", ($(window).height()))
};

因此，当.expanded类打开和关闭时，它应该工作（当然不是）

这是我的切换：

$('.js .menu-button').click(function() {
  $(this).toggleClass('expanded');
  $('[role="navigation"]').slideToggle('fast', function() {});
});

这是SASS

nav
  padding: 0
  margin: 0
  +transparent(#000, .6)
  width: 100%

所以，当“扩展”被切换时，css中的透明黑色应覆盖整个视口

非常感谢任何帮助。

我也试过这样做：

$('.js .menu-button').click(function() {
  $(this).toggleClass('expanded');
  $('[role="navigation"]').slideToggle('fast', function() {});
  $('nav').css("height", ($(window).height()))
});

这会打开黑暗背景，但我无法将其关闭。

HTML：

<div class="menu-button"></div>
  <nav> 
  <ul role="navigation" id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">My Stay</a></li>
    <li><a href="#">Hotel Info</a></li>
    <li><a href="#">Buzz</a></li>
    <li><a href="#">Local Info</a></li>
    <li><a href="#">Things to Do</a></li>
    <li><a href="#">Offers</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</nav>

Answer 1

为什么不简单地在click（）函数（）中设置深色背景？

$('.js .menu-button').click(function() {
  $(this).toggleClass('expanded');
  //test for expanded class
  if ($(this).hasClass('expanded'))
  {
     //turn something dark

  }
  else
  {
     //remove dark
  }

  $('[role="navigation"]').slideToggle('fast', function() {});
  $('nav').css("height", ($(window).height()))
});

菜单切换时灰显背景

1 个答案: