Question

我正在使用on方法附加“点击”按钮。事件到按钮切换图库...

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

如何阻止事件影响图库？

1 个答案: