如何阻止某個活動影響圖庫？

Question

我使用的方法上的「點擊」事件附加到一個按鈕來切換畫廊...

$(document).ready(function() { 
     $('.galleryContainer').hide(); 

     $('.myButtons').on("click", function(e) { 
     $('.galleryContainer').toggle(400); 
     e.stopPropagation(); 
     return false; 
     }); 
    }); 

的問題是，它的影響畫廊的功能（即點擊的縮略圖畫廊引起切換功能火...）

任何幫助，將不勝感激！

<div class="container"> 
<div class="alpha sixteen columns omega"> 
<h2>Engagements</h2> 
    <div id="myWorkEngagements" class="scale-with-grid"></div> 
    <a href="#" class="myButtons ">press me</a>            

     <p class="coreParagraph"> 
     Skeleton is built on three core principles: 
    </p> 

    <ul class="galleryContainer gallery"> 
      <li><a href="images/weddingImages/full/001.jpg" rel="external"><img src="images/weddingImages/thumb/001.jpg" alt="Image 001" class="myButtons"></a> 
     </li> 
     <li> 
      <a href="images/weddingImages/full/002.jpg" rel="external"><img src="images/weddingImages/thumb/002.jpg" alt="Image 002" class="myButtons"></a> 
     </li> 
    </ul> 
</div><!-- eight columns --> 

Answer 1

您已將相同的類myButtons添加到縮略圖圖像，所以點擊處理程序將因選擇器基於此類而觸發。

嘗試像myButtons2

碼指派另一個類的圖像：

<div class="container"> 
    <div class="alpha sixteen columns omega"> 
     <h2>Engagements</h2> 

     <div id="myWorkEngagements" class="scale-with-grid"></div> <a href="#" class="myButtons ">press me</a> 
     <p class="coreParagraph">Skeleton is built on three core principles:</p> 
     <ul class="galleryContainer gallery"> 
      <li><a href="images/weddingImages/full/001.jpg" rel="external"><img src="images/weddingImages/thumb/001.jpg" alt="Image 001" class="myButtons2"></a> 

      </li> 
      <li> <a href="images/weddingImages/full/002.jpg" rel="external"><img src="images/weddingImages/thumb/002.jpg" alt="Image 002" class="myButtons2"></a> 

      </li> 
     </ul> 
    </div> 
    <!-- eight columns --> 

演示：http://jsfiddle.net/IrvinDominin/856FL/