Question

我非常基本：

        // jQuery Document
  var main = function() {
  /* Push the body and the nav over by 285px over */
  $('#share').click(function() {
    $('.menu').animate({
      right: "0px"
    }, 200);

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

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

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


$(document).ready(main);

并且，我想做这样的事情..如果用户点击菜单图标（#share），菜单会出现，如果菜单可见并且用户再次点击，它将消失..如何简单地做？我想尽可能简单地做...请帮帮我:)。

是的......我写了类似html的东西。单击..然后关闭菜单..应该有菜单图标的名称（#share）

有菜单css：

.menu {
  background-color: #373737;
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
}

和html：

<!DOCTYPE html>
<html>
    <head>
        <title>Minecraft</title>
        <link href="styles_m.css" rel="stylesheet" type="text/css">

    </head


    <body>
    <div class="menu">

    </div>

        <div id="header">
        <div id="main">
            <a href="minecraft.html"><img src="my_logo.png"></a>
        </div>
        <div id="share">
            <img name="menu" src="my_menu.png">
        </div>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js">

        </script>
    </body
</html>

Answer 1

只需使用fadeToggle()：

$(function () {
  $(".showMenu").click(function () {
    $(this).next(".menu").fadeToggle(400);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="display: none;">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

或者如果你想让它向右滑动，你可以使用动画：

只需使用animate()：

$(function () {
  $(".showMenu").click(function () {
    if ($(this).next(".menu").css("left") != "0px")
      $(this).next(".menu").animate({
        left: 0
      }, 1000);
    else
      $(this).next(".menu").animate({
        left: -250
      }, 1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="position: relative; left: -250px;">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

Answer 2

您还可以使用变量控件来了解何时显示/隐藏元素（jsFiddle）：

var control = false;
var main = function() {
    $('#share').click(function() {
        if( control === true ){
            $('.menu').animate({
                right: "-285px"
            }, 200);

            $('body').animate({
                right: "0px"
            }, 200);
            control = false;
            return;
        }
        control = true;
        $('.menu').animate({ right: "0px" }, 200);
        $('body').animate({ right: "285px" }, 200);
    });
};

Answer 3

$('button').click(function() {

  $('.menu').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="menu" style="display:none;">
  <ul>
    <li>menu 1</li>
    <li>menu1</li>
    <li>menu 3</li>
    <li>menu 4</li>
  </ul>
</div>

Answer 4

HTML 5数据标签可以是解决方案。看看我的小提琴

$('.showMenu').click(function() {
  var active = $('.menu').data('active');
  
  if(active === 'N') {
    $('.showMenu').html('Hide Menu');
    $('.menu').fadeIn(100);
    $('.menu').data('active', 'Y');
  } else {
    $('.showMenu').html('Show Menu');
    $('.menu').fadeOut(100);
    $('.menu').data('active', 'N');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button class="showMenu">Show Menu</button>
<div class="menu" data-active="N" style="display: none;">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>

Answer 5

您可以使用fadeToggle功能：

$(document).ready(function() {
    $('icon').click(function() {
        $('dropdown element').fadeToggle(400);
    });
});

可在此处找到一个示例：https://www.w3schools.com/jquery/eff_fadetoggle.asp

单击菜单时，它会打开，再次单击它会关闭

5 个答案: