如何在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中擁有多個點擊功能？

回答

相關問題