文章/答案/技术大牛

发布

社区首页 >问答首页 >href链接在折叠面板中不起作用，似乎Javascript覆盖了click函数

问href链接在折叠面板中不起作用，似乎Javascript覆盖了click函数
EN

Stack Overflow用户

提问于 2012-10-17 04:44:19

回答 1查看 4.7K关注 0票数 2

单击A href链接时，A href链接在折叠面板中不起作用。似乎accordion的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>

jquery

html

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-10-18 00:33:47

将此代码添加到切换函数的末尾

.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/

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12923109

复制

相似问题

问href链接在折叠面板中不起作用，似乎Javascript覆盖了click函数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问href链接在折叠面板中不起作用，似乎Javascript覆盖了click函数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问href链接在折叠面板中不起作用，似乎Javascript覆盖了click函数
EN