javascript - 对菜单使用条件语句

Question

我的网站菜单分为两部分。

左侧面板和右侧面板。

单击两个菜单按钮之一时，面板会从侧面滑入并覆盖浏览器窗口。

目前我已经使该功能正常工作。

我遇到困难的地方是使用条件语句创建函数的逻辑:

• “如果左侧面板处于“事件”/“可见”状态，并且单击了右侧面板按钮，则将左侧面板滑出 View ，同时滑入右侧面板。”

和虎钳反之亦然。

这是js-fiddle下面是代码:

注意:我尝试在类名 .panel--oneBtn.is-active 时触发警报，但没有任何反应。谢谢

HTML

<div class="wrapper">
  <div class="nav_header">

    <div class='nav_header_link_wrap abso-left panel--oneBtn'>
      <span class="nav_header_link abso-left open">Eat.Drink.Sleep</span>
      <span class="nav_header_link abso-left close">Close</span>
    </div>
    <div class='nav_header_link_wrap abso-right panel--twoBtn'>
      <span class="nav_header_link abso-right open">Bookings/Contact</span>
      <span class="nav_header_link abso-right close">Close</span>
    </div>

 </div>

 <div class="menuPanel panel--one"></div>
 <div class="menuPanel panel--two"></div>

</div>

JS

function navSlider(){
  var $buttonOne = $('.panel--oneBtn'),
    $buttonTwo = $('.panel--twoBtn');

  $buttonOne.on('click', function() {
    $('.panel--one').toggleClass('is-visible');
    $buttonOne.find('.open').toggleClass('is-gone');
    $buttonOne.find('.close').toggleClass('is-visible');
    $(this).toggleClass('is-active');
  });

  $buttonTwo.on('click', function() {
    $('.panel--two').toggleClass('is-visible');
    $buttonTwo.find('.open').toggleClass('is-gone');
    $buttonTwo.find('.close').toggleClass('is-visible');
    $(this).toggleClass('is-active');
  });

  if ( $buttonOne.hasClass('is-active') ){
    alert('Left is active');
  } else if ($buttonTwo.hasClass('is-active') ){
    alert('Right is active');
  }

}

navSlider();

Answer 1

这是您想要的效果吗？

https://jsfiddle.net/snookieordie/oez0488h/41/

$buttonOne.on('click', function() {

  //added this code
    if ( $buttonTwo.hasClass('is-active') ) {
        $('.panel--two').toggleClass('is-visible');
        $buttonTwo.find('.open').toggleClass('is-gone');
        $buttonTwo.find('.close').toggleClass('is-visible');
        $buttonTwo.toggleClass('is-active');
    }
  //

    $('.panel--one').toggleClass('is-visible');
    $buttonOne.find('.open').toggleClass('is-gone');
    $buttonOne.find('.close').toggleClass('is-visible');
    $(this).toggleClass('is-active');
});



$buttonTwo.on('click', function() {

  //added this code
    if ( $buttonOne.hasClass('is-active') ) {
        $('.panel--one').toggleClass('is-visible');
        $buttonOne.find('.open').toggleClass('is-gone');
        $buttonOne.find('.close').toggleClass('is-visible');
        $buttonOne.toggleClass('is-active');
    }
  //

    $('.panel--two').toggleClass('is-visible');
    $buttonTwo.find('.open').toggleClass('is-gone');
    $buttonTwo.find('.close').toggleClass('is-visible');
    $(this).toggleClass('is-active');
});