Question

第一篇文章，我正在尝试制作某种类型的幻灯片菜单，尽管它可以单击一次并让菜单选项出现。再次点击会重做开场动画，而不是将它们减去回到它们的第一个位置。

        let menuopen = false;

$(document).ready(function(e) {
      $("#menu_button").on('click',function(e) {
       if (menuopen == false) {
        $("#menu_button").css({"left":"500px"}).animate({left: '450px'})
        $("#menu_select").css({"left":"500px"}).animate({left: '750px'});
        $("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
        menuopen == true;
        
        
      }
      else if (menuopen == true) {
        $("#menu_button").css({"left":"450px"}).animate({left: '500px'})
        $("#menu_select").css({"left":"750px"}).animate({left: '500px'});
        $("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});

        menuopen == false
      }
    });
});

Answer 1

你没有分配

 menuopen == true;

应该

menuopen = true;

无论如何：为什么要if，就用else？

试试这个 - 它保存按钮中的状态

你可以使用三元，但在这种情况下会很麻烦

$(function(e) {
  $("#menu_button").on('click',function(e) {
    const menuopen = !!$(this).data("open"); // force boolean 
    if (menuopen) {
      $("#menu_button").css({"left":"450px"}).animate({left: '500px'})
      $("#menu_select").css({"left":"750px"}).animate({left: '500px'});
      $("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});
    }  
    else {
      $("#menu_button").css({"left":"500px"}).animate({left: '450px'})
      $("#menu_select").css({"left":"500px"}).animate({left: '750px'});
      $("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
    }
    $(this).data("open",!menuopen) 
  });
});

也许

const butOpen =   { "left": "450px" },
  butClosed =     { "left": "500px" },
  selectOpen =    { "left": "750px" },
  selectClosed =  { "left": "500px" },
  select2Open =   { "left": "1050px" },
  select2Closed = { "left": "500px" }

$(function(e) {
  $("#menu_button").on('click', function(e) {
    const menuopen = !!$(this).data("open"); // force boolean 
    $("#menu_button").css(menuopen ? butOpen : butClosed).animate(menuopen ? butClosed : butOpen)
    $("#menu_select").css(menuopen ? selectOpen : butClosed).animate(menuopen ? selectClosed : selectOpen)
    $("#menu_select_two").css(menuopen ? select2Open : select2Closed).animate(menuopen ? select2Closed : select2Open)
    $(this).data("open", !menuopen)
  });
});

或者使用一个类并切换它：

window.addEventListener("load", function(e) {
  const wrapper = document.querySelector(".wrapper");
  document.getElementById("menu").addEventListener("click", function(e) {
    wrapper.classList.toggle("open");
    this.textContent = wrapper.classList.contains("open") ? "Close" : "Open";
  })
})

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#slide {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  transition: 1s;
}

.wrapper.open #slide {
  transition: 1s;
  left: 0;
}

<button id="menu" type="button">Open</button>
<div class="wrapper">
  <img id="slide" src="https://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
</div>

Jquery 'click' 函数仅适用于“if”语句，不适用于“else if”

1 个答案: