Question

我的页面左侧有一个div，右侧有一个div。我希望两个动画都能像“侧面菜单”一样设置为“隐藏”和“显示”位置。我设法得到一个这样的工作：

$(document).ready(function () {
    $(".header-tab").click(function () {
        if ($(".header").position().left == 0) {
            $(".header").animate({left:'-150px'}, "slow");
            $(".header-tab").animate({left:'0'}, "slow");
        } else {
            $(".header").animate({left:'0'}, "slow");
            $(".header-tab").animate({left:'150px'}, "slow");
        }
    });
});

但是我这样做是为了让左右两边都工作，只有左侧工作：

$(document).ready(function () {
    $(".header-tab").click(function () {
        if ($(".header").position().left == 0) {
            $(".header").animate({left:'-150px'}, "slow");
            $(".header-tab").animate({left:'0'}, "slow");
        } else {
            $(".header").animate({left:'0'}, "slow");
            $(".header-tab").animate({left:'150px'}, "slow");
        }
    });

    $(".aside-tab").click(function () {
        if ($(".aside").position().right == 0) {
            $(".aside").animate({right:'-150px'}, "slow");
            $(".aside-tab").animate({right:'0'}, "slow");
        } else {
            $(".aside").animate({right:'0'}, "slow");
            $(".aside-tab").animate({right:'150px'}, "slow");
        }
    });
});

那么有人可以告诉我在哪里或如何添加第二次点击功能（旁边）？

修改

这是HTML：

<!doctype html>
<html>
    <head>
        <title>Website Title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="header"></div>
        <div class="header-tab"></div>

        <div class="container"></div>

        <div class="aside"></div>
        <div class="aside-tab"></div>
    </body>
</html>

Answer 1

从jQuery 1.7开始，.on()函数是将事件处理程序附加到元素的首选方法。其中一个原因是相应的.off()函数可以轻松管理附加的事件处理程序。

如果您想在元素上使用多个点击事件处理程序，只需将它们与.on()串在一起。

$("#some-element").on("click", eventHandlerOne).on("click", eventHandlerTwo);
// both event handlers will fire from a click

稍后，如果需要，可以单独删除处理程序

$("#some-element").off("click", eventHandlerTwo); // eventHandlerOne still active

或删除类型的所有事件处理程序：

$("#some-element").off("click"); // no more click event handlers!

Answer 2

您的代码存在一些问题，首先是因为您有两个 .aside div，当您点击任何需要指定的.aside-tab div时滑动。即假设我点击右 div.aside-tab并点击事件被触发，因为你有两个 .aside div这个条件：

if($(".aside").position().right == 0)

看起来会让人感到困惑，其中.aside是哪个？这一行： $（“。aside”）。animate（{right：' - 150px'}，“slow”）;

以上一行会为它们制作动画吗？你需要一种方法来知道它是正确的还是左边的，我添加了id s，并且根据id的值，我知道它是右边还是左边的aside.position().right ，我为相应的动画制作动画。

另外，恕我直言，我不认为这个.left会返回一个值，因为我知道它是.top或.aside，所以对于正确的值，我们将根据全窗口宽度或全窗口宽度 - 150，这是$(document).ready(function () { $(".header-tab").click(function () { if ($(".header").position().left == 0) { $(".header").animate({left:'-150px'}, "slow"); $(".header-tab").animate({left:'0'}, "slow"); } else { $(".header").animate({left:'0'}, "slow"); $(".header-tab").animate({left:'150px'}, "slow"); } }); $(".aside-tab").click(function () { var id, aside; id = $(this).attr('id'); id = id.replace('-btn', ''); aside = $('#' + id + '-side'); if(id == 'left'){ if(aside.position().left == 0){ aside.animate({left:'-150px'}, "slow"); } else { aside.animate({left:'0'}, "slow"); } } else { var winW = $(window).width(); if(aside.position().left == winW - 150){ aside.animate({left: winW}, "slow"); } else { aside.animate({left:winW - 150}, "slow"); } } }); });

的宽度

它应该是这样的：

JS Fiddle

body{
  padding:0;
  margin:0;
  overflow-x:hidden;
}
.aside-tab{
  width:25px;
  height:25px;
  display:inline-block;
  cursor:pointer;
  position:fixed;
  top:5px;
  z-index:1000;
}
#left-btn{
  background-color:tomato;
  left:5px;
}
#right-btn{
  right:5px;
  background-color:green;
}
.aside{
  height:100vh;
  width:150px;
  display:inline-block;
  z-index:10;
  position:absolute;
  top:0;
}
#left-side{
  background-color:skyblue;
  left:-150px;
}
#right-side{
  background-color:orange;
  left:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="header"></div>
<div class="header-tab"></div>

<div class="container"></div>

<div id="left-side" class="aside"></div>
<div id="left-btn" class="aside-tab"></div>

<div id="right-side" class="aside"></div>
<div id="right-btn" class="aside-tab"></div>

element.on('click',

更新：您也可以考虑使用element.click代替element.off()作为答案中提到的JCD，不仅仅是因为element.on()方法，但也因为使用input type="text"您可以附加多个事件，假设$('#my-input').on('input change blur keypress', function(){...});字段可能就像：

namespace eloquent\eloquent;

class User extends Eloquent implements {

  protected $table = 'users';

  public function userable()
  {
        return $this->morphTo();
  }
}

有时可能很有用。

如何在jQuery中拥有多个单击功能？

2 个答案: