2

メニューを表示するリンクがあります。そのメニューが表示されている (展開されている) 場合、背景を暗くする必要があります。だからここに私がしようとしているものがあります。

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>
4

1 に答える 1

1

click() function() で単純に暗い背景を設定してみませんか?

$('.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()))
});
于 2012-06-14T16:00:08.603 に答える