Question

我目前有一个jquery菜单，当你点击菜单时打开，当你单击左上角的X时关闭，但是我想通过点击菜单来切换它。我对jquery很新，并希望得到任何帮助我看了另一个类似的问题，但除非我重写，否则我没有看到我怎么能适应它呢

var main = function() {
  /* Push the body and the nav over by 285px over */
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

＆＃13;

/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

/* Basic styling */
.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #000;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}

＆＃13;

<div class="menu">
      
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- Main body -->
      <div class="icon-menu">
        Menu
      </div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/sliding-menu.js"></script>

＆＃13;

Answer 1

您可以尝试以下操作：

$('.icon-menu').click(function(){       
    var menu_var = $('#menu');
    var body_var = $('body');
    if (body_var.hasClass('menu_opened')){      
        body_var.animate({"right":"-100%"}, "fast").removeClass('menu_opened');
        body_var.animate({ "left": "0%" }, "fast").removeClass('menu_opened');
    } else {
        body_var.animate({"right":"0%"}, "fast").addClass('menu_opened');
        body_var.animate({ "left": "-80%" }, "fast").addClass('menu_opened');
    }
});

此功能完美无缺。但是，你必须编写一些CSS来使函数正常工作。

Answer 2

最简单的方法是将变量与菜单状态保持一致（打开或关闭）。

你的功能可能是这样的：

var main = function() {
    var menuState = 'closed';

    $('.icon-menu').click(function(e) {
        if(menuState == 'closed') {
            open();
        }
        else {
            close();
        }
    });

    $('.icon-close').click(function() {
        close();
    });

    function open() {
        if(menuState == 'closed') {
            $('.menu').animate({
                left: "0px"
            }, 200);

            $('body').animate({
                left: "285px"
            }, 200);
            menuState = 'opened';
        }
    }

    function close() {
        if(menuState == 'opened') {
            $('.menu').animate({
                left: "-285px"
            }, 200);

            $('body').animate({
                left: "0px"
            }, 200);
            menuState = 'closed';
        }
    }
};

$(document).ready(main);

Answer 3

$('.icon-menu').click(function() {
    let menu = $(this);

    if (!menu.data('isOpen')) {
        menu.data('isOpen', true);

        $('.menu').animate({
            left: "0px"
        }, 200);

        $('body').animate({
            left: "285px"
        }, 200);
    }
    else {
        menu.data('isOpen', false);

        $('.menu').animate({
            left: "285px" // check the value
        }, 200);

        $('body').animate({
            left: "0px" // check the value
        }, 200);
    }
});

制作一个jquery滑出菜单切换

3 个答案: