Question

我使用下面的代码有一个手风琴效果，它的工作原理。问题是，当我点击文章内的链接时，它会关闭内容并且不会打开链接。我该如何防止这种情况发生？谢谢。

http://jsfiddle.net/vinicius5581/Lrpwojyg/

HTML

<section>
   <ul class="booklist">
     <li>
         <a>Article Name 1</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
              <a href="http://www.google.com">This link shouldn't close article</a>
          </article>
     </li>
     <li>
         <a>Article Name 2</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
              <a href="http://www.google.com">This link shouldn't close article</a>
          </article>
     </li>
     <li>
         <a>Article Name 3</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
              <a href="http://www.google.com">This link shouldn't close article</a>
          </article>
     </li>
   </ul>
</section>

JAVASCRIPT

$("li").click(function(){
  $(this).find("article").slideToggle().end().siblings("li").find("article").slideUp();   
});

CSS

.booklist>li>article{
     display:none
 }

Answer 1

您可以使用以下代码

来完成

$("a").click(function(){
    $(this).siblings("article").slideToggle()
       .closest("li").siblings("li").find("article").slideUp();
});

DEMO

或使用 e.stopPropogation() 阻止a代码上的点击事件

$("li").click(function(){
     $(this).find("article").slideToggle().end().siblings("li").find("article").slideUp();   
}).on('click','article a',function(e){ e.stopPropagation(); });

DEMO

Answer 2

这是我给你的代码，你刚刚回答了另一篇文章。取而代之的是a

$(".booklist li a").click(function(){

  $(this).siblings("article").slideToggle().closest("li").siblings("li").find("article").slideUp();   
});

FIDDLE

Answer 3

使用

 $("li > a").click(function(){
         $(this).parent().find("article").slideToggle().end().siblings("li").find("article").slideUp();   
    });

而不是http://jsfiddle.net/Lrpwojyg/9/

单击内部锚点时如何防止切换效果？

3 个答案: