Question

我希望我的淡入淡出菜单div在单击菜单按钮时淡入，并在再次单击菜单按钮时逐渐淡出。我已经关注了其他几个教程并研究了其他问题，但我无法正常工作。刷新后，div已经可见，单击菜单按钮不会执行任何操作。这是我的代码 -

  <!-- MENU BUTTON HAMBURGER -->
  <button class="menu-button" id="toggle">
      <span class="hamburger"></span>
  </button>

  <!-- ====== MENU ====== -->
  <div id="fade-menu">
      <span id="temporary-space"></span>
  </div>

var toggle = $('#toggle');
var menu = $('#fade-menu');

toggle.click(function() {
    menu.fadeToggle(1000, function() {

    });
});

Answer 1

如果你需要的是禁用效果，当你点击几次时，它会一遍又一遍地淡出，只需在fad效果期间禁用按钮，如下所示：

<!-- MENU BUTTON HAMBURGER -->
<button class="menu-button" id="toggle">
    <span class="hamburger">toggle</span>
</button>

<!-- ====== MENU ====== -->
<div id="fade-menu">
    <span id="temporary-space">test</span>
</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // without saving the menu state
        var toggle = $('#toggle');
        var menu = $('#fade-menu');
        toggle.click(function() {
            toggle.prop('disabled', true);
        menu.fadeToggle(1000, function() {
            toggle.prop('disabled', false);
        });
        });
    });
</script>

如果你需要的是保存切换的状态（如果可见或不可见），那么告诉我，我将给你一段带有localstorage的代码。

Div在单击按钮时在淡入和淡出之间切换

1 个答案: