Question

我正在尝试在单击条形图标时从左侧创建滑入式内容（不是菜单，但效果相同）。我设法通过一个按钮打开而另一个按钮关闭（即，将页面移动到左后方）来实现。但是现在，我只想使用一个按钮来做同样的事情，所以在第一次点击时它会打开内容，在第二次关闭时。我是Javascript / jQuery的新手，所以我一直在网上搜索并调整它，试图让它工作。

我这里有一个测试JsFiddle，所以你可以看到错误，希望对我有所帮助。

使用Javascript：

var main = function() {
$('.icon-menu').click(function(){
  $('.menu').toggle(
    function(){
      $('.menu').animate({
        left: "0px"}, 200);
  },
    function(){
      $('.menu').animate({
        left: "600px"}, 200);
  });
});
}; 

$(document).ready(main);

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="icon-menu icon-close col-xs-1">
            <i class="fa fa-bars fa-4x"></i>
        </div>
    </div>

     <div class="row">
         <div class="menu col-md-5">
            <div class="texto-about col-md-offset-1">
                <h1>About</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, quia.</p>
            </div>
        </div>
    </div>
</div>

CSS：

body {
background-color: grey;
}

.menu {
background-color: blue;
left: -600px;  /* same as width */
height: 100%;
position: fixed;
/*  width: 600px; */
}

.texto-about {
color: #fff;
font-size: 15px;
text-decoration: none;
}

.icon-menu {
color: #fff;
cursor: pointer;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
z-index: 0;
background-color: red; /* just so you know where the button is */
}

.icon-menu i {
margin-right: 5px;
}

注意：我知道在新版本的jQuery中已经弃用了切换，但这是我发现的与我的问题相关的唯一解决方案。

Answer 1

在jquery 1.8中，切换功能本身就像一个单击功能，所以你不需要单独的点击功能。

<强>演示

http://jsfiddle.net/ue36sfcs/

<强>代码

 $('.icon-menu').toggle(
    function(){
      $('.menu').animate({
        left: "600px"}, 200);
  },
    function(){
      $('.menu').animate({
        left: "0px"}, 200);
  });

对于1.8以上的Jquery版本，您可以设置开，关标志

<强>演示

http://jsfiddle.net/eae779xo/

<强>代码

var on = "no"
$(document).on("click", ".icon-menu", function(){      
    if (on == "no") { $('.menu').animate({ left: "600px"}, 200);
on = "yes"
}
else { $('.menu').animate({ left: "0px"}, 200);
on = "no"
}
})

在同一按钮上滑入和滑出内容

1 个答案: