如果是，则显示和隐藏菜单不起作用

Question

我正在创建一个显示和隐藏点击的菜单。该节目有效，所以当我点击我的汉堡包时，div会出现。但是，在第二次单击时，一旦“打开”类处于活动状态，我的div不会再次隐藏。我的语法是否正确。

$(".ham").click(function(){
    if($(this).hasClass('closed')) {
        $(this).find(".hamburger").removeClass( "closed" );
        $(this).find(".hamburger").addClass( "open" );
        $(".menu1").css("display", "block");
        $(".menu2").css("display", "block");
        $(".menu3").css("display", "block");
        $(".menu4").css("display", "block");
        $(".logo").removeClass("fadeIn").addClass("fadeOut");
        setTimeout(function(){ $(".logo2").css("display", "block") }, 500);
    }
    else{
        $(this).find(".hamburger").addClass( "closed" );
        $(this).find(".hamburger").removeClass( "open" );
        $(".menu1").css("display", "none");
        $(".menu2").css("display", "none");
        $(".menu3").css("display", "none");
        $(".menu4").css("display", "none");
        $(".logo").removeClass("fadeOut").addClass("fadeIn");
        setTimeout(function(){ $(".logo2").css("display", "none") }, 500);
    }
});

 <div class="ham closed">
       <div id="burger" class="hamburger animated fadeIn">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
  </div>
  <div class="menu row">
     <div class="col-md-3 col-sm-12 menu1 animated fadeInUp">
     </div>
     <div class="col-md-3 col-sm-12 menu2 animated fadeInDown">
     </div>
     <div class="col-md-12 col-sm-12 menu3 animated fadeIn">
     </div>
  </div>
  <div class="row">
     <div class="col-md-6 col-sm-12 menu4 animated fadeInRight">
     </div>
  </div>

.menu1 {
    background-color: #ffffff;
    height: 100%;
    display: none;
    position: fixed;
    top: 0px;
    z-index: 999999;
    left: 0px;
}

Answer 1

希望这会对你有所帮助。

$(".ham").click(function(){
    if($(this).hasClass('closed')) {
        $(this).removeClass( "closed" );
        $(this).addClass( "open" );
        $(".menu1,.menu2,.menu3,.menu4").css("display", "block");
        $(".logo").removeClass("fadeIn").addClass("fadeOut");
        setTimeout(function(){ $(".logo2").css("display", "block") }, 500);
    }
    else{
        $(this).addClass( "closed" );
        $(this).removeClass( "open" );
        $(".menu1,.menu2,.menu3,.menu4").css("display", "none");
        $(".logo").removeClass("fadeOut").addClass("fadeIn");
        setTimeout(function(){ $(".logo2").css("display", "none") }, 500);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ham">
       <div id="burger" class="hamburger animated fadeIn">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         Ham
       </div>
  </div>
  <div class="menu row">
     <div class="col-md-3 col-sm-12 menu1 animated fadeInUp">
     menu1
     </div>
     <div class="col-md-3 col-sm-12 menu2 animated fadeInDown">
     menu2
     </div>
     <div class="col-md-12 col-sm-12 menu3 animated fadeIn">
     menu3
     </div>
  </div>
  <div class="row">
     <div class="col-md-6 col-sm-12 menu4 animated fadeInRight">
     menu4
     </div>
  </div>

Answer 2

您可以合并菜单项的代码，而不是重复它。 “开放”和“封闭”课程应分配给“火腿”而不是“汉堡包”。

以下是为您修改的JS代码：

$(".ham").click(function() {
  if ($(this).hasClass('closed')) {
    $(this).removeClass("closed").addClass("open");
    $(".menu1,.menu2,.menu3,.menu4").css("display", "block");
    $(".logo").removeClass("fadeIn").addClass("fadeOut");
    setTimeout(function() {
      $(".logo2").css("display", "block")
    }, 500);
  } else {
    $(this).addClass("closed").removeClass("open");
    $(".menu1,.menu2,.menu3,.menu4").css("display", "none");
    $(".logo").removeClass("fadeOut").addClass("fadeIn");
    setTimeout(function() {
      $(".logo2").css("display", "none")
    }, 500);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ham">
  <div id="burger" class="hamburger animated fadeIn">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Ham
  </div>
</div>
<div class="menu row">
  <div class="col-md-3 col-sm-12 menu1 animated fadeInUp">
    menu1
  </div>
  <div class="col-md-3 col-sm-12 menu2 animated fadeInDown">
    menu2
  </div>
  <div class="col-md-12 col-sm-12 menu3 animated fadeIn">
    menu3
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-sm-12 menu4 animated fadeInRight">
    menu4
  </div>
</div>