a href 链接在手风琴内不起作用，似乎 Javascript 覆盖了点击功能答案

【问题标题】：a href links are not working inside of a accordion, it seems Javascript overwrites click functiona href 链接在手风琴内不起作用，似乎 Javascript 覆盖了点击功能
【发布时间】：2012-10-16 20:44:19
【问题描述】：

单击 a href 链接时，a href 链接在手风琴内不起作用。似乎手风琴的JS功能覆盖了a href链接。现在点击链接，不是打开另一个页面，而是进出扩展（这是JS的功能），这是JS的原始功能。我想要做的是保持手风琴功能，并使 a href 链接工作。这是示例代码：http://jsfiddle.net/mrPWa/

    <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 <script type="text/javascript">


$(function() { 
height = $(window).height();
 $('.Accord').css({height: height});

    $('.Accord').toggle(function() {
   $('.Accord').animate({width: "20%"}, 500 );
      $(this).removeClass('deSelect');
         $(this).animate({ width: "40%"}, {duration: 500, queue: false});
            $('.deSelect').animate({width: "15%"}, {duration: 500, queue: false});
               $(this).addClass('deSelect');

  }, function() {   
       $('.deSelect').animate({width: "20%"}, 500);



  });
 });

a href 链接在这里。

   <body>

      <div id="Sponsorships_index">

<div id="accordionWrapper">

    <ol>
        <li id="snow" class="Accord deSelect">
        <a href="http://www.apple.com/"> 
        <h1>Apple link is not working!!!!!</h1></a>

        </li>

        <li id="street" class="Accord deSelect">
              <a href="http://www.apple.com/"> 
        <h1>Apple link is not working!!!!!</h1></a>
        </li>

        <li id="water" class="Accord deSelect">

        </li>

        <li id="dirt" class="Accord deSelect">

        </li>

        <li id="sound" class="Accord deSelect">

        </li>
    </ol>
</div>

  </div>
    </body>

【问题讨论】：

显示的代码中的任何内容都不应该对链接做任何事情。创建一个在 jsfiddle.net 中复制问题的演示
抱歉，我应该多清理一下代码。这是jsfiddle.net/mrPWa 的示例
不是。这是两个不同的项目，它们可能看起来很相似。
我学会了，但似乎我不能用它来解决这个问题。 event.preventDefault() 是这样的，但是 event.preventDefault() 是防止默认点击功能，这不是我想要的。我想要原来的功能。

标签： javascript jquery html

【解决方案1】：

将此添加到切换功能的末尾

.on('click', 'a', function(e) { e.stopPropagation(); })

防止事件冒泡。

所以你最终得到了

$('.Accord').toggle(function() {
    $('.Accord').animate({ width: "20%" }, 500)
    $(this).removeClass('deSelect')
    $(this).animate({ width: "40%" }, { duration: 500, queue: false })
    $('.deSelect').animate({ width: "15%" }, { duration: 500, queue: false })
    $(this).addClass('deSelect')
}, function () {
    $('a').click(function(e) { e.stopPropagation(); })
    $('.deSelect').animate({ width: "20%" }, 500)
}).on('click', 'a', function(e) { e.stopPropagation(); })

在这里测试：http://jsfiddle.net/RASG/sSG2f/

【讨论】：

非常感谢。这就是我要找的： event.stopPropagation();我会记住的。顺便说一句，你知道为什么最后一个手风琴（蓝色手风琴）总是在手风琴未展开时向下移动（消失）吗？我发现这个问题是多种多样的，有时很好，但有时不是。就像现在我在 Chrome 上测试它一样，很好。但是如果我用火狐发短信，问题又来了。
刚刚遇到了类似的问题，这解决了。非常感谢@RASG