切换菜单时背景变灰

Posted 2023-03-07

【中文标题】切换菜单时背景变灰

【英文标题】：Gray out Background when menu is toggled

【发布时间】：2012-06-16 16:25:45

【问题描述】：

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

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>

【问题讨论】：

您的第一个 sn-p 与您的点击处理程序有何关联？

@F.Calderan 不就是在找扩展类吧。

@F.Calderan 我编辑了我的原始帖子，以展示我正在尝试使用点击处理程序的另一种方式，但这只是正确的 50%。

您是否使用任何 jquery 插件来制作您的菜单？您能否添加部分菜单的 html 和/或分享一个 jsfiddle 链接来测试它？

@FlavioCysne 我添加了 html。我正在努力让 jsfiddle 工作

【参考方案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()))
);