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

我的页面左侧有一个div，右侧有一个div。我希望这两个动画都是“隐藏”和“显示”的位置，就像侧面菜单一样。我设法得到一个像这样的工作：如何在jQuery中拥有多个点击功能？

$(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>

来源

2016-01-05 Alexiz Hernandez

请显示HTML。保存猜测:) –

我会建议使用布尔值来确定如果边是打开或关闭，而不是检查位置== 0 – koga73

你有几个问题与您的代码，首先你有两个.aside divs，当点击.aside-tab divs中的任何一个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，所以正确的，我们将根据全窗口宽度，或全窗口宽度动画 - 150，这是的.aside

宽度应该是这样的：

JS Fiddle

$(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'){ 
 
     \t if(aside.position().left == 0){ 
 
      \t \t aside.animate({left:'-150px'}, "slow"); 
 
      } else { 
 
      \t aside.animate({left:'0'}, "slow"); 
 
      } 
 
     } else { 
 
     \t 
 
     \t var winW = $(window).width(); 
 
     \t if(aside.position().left == winW - 150){ 
 
      \t \t aside.animate({left: winW}, "slow"); 
 
      } else { 
 
      \t 
 
      \t aside.animate({left:winW - 150}, "slow"); 
 
      } 
 
     } 
 
    }); 
 
});

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>

UPDATE：你也可以考虑使用element.on('click',，而不是在他的回答中提到element.click为JCD，不仅是因为element.off()方法，还因为与element.on()您可以将多个事件，假设一个input type="text"字段可能类似于：

$('#my-input').on('input change blur keypress', function(){...});

有时可能有用。

来源

2016-01-05 18:23:04

这与我的想法有点不同，但我更喜欢你的设定！非常感谢你！！ –

您好，我很高兴帮助您，享受编码 –

在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!

来源

2016-01-05 17:47:42 jered

我不完全确定这会回答你的问题，因为我可能误解了它，但希望它有帮助。 – jered

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

回答

相关问题