所有的手风琴排一次打开，如何解决？

Question

这个页面使用了一个包含一个富文本元素的手风琴。 JS用于切换一个活动类，它可以改变其上的最大高度值，从而揭示内部的抽象内容。

我有一个问题，超链接不能在其中工作，因为最大高度值是干扰;导致手风琴再次打开/关闭，而不是能够瞄准文本（尝试使用z-index，但似乎没有办法）。

我回到了JS和CSS文件中，以便将手风琴的标题定位为一个单独的类。这解决了超链接的问题，但现在，当我点击其中一个手风琴时，所有手风琴都立即打开，这是以前没有发生过的。

Image

标记

<div class="accordion-row"> 
@foreach (var item in Model.Items) { 
    <div class="teaser"> 
    <div class="teaser-title"> 
     @item.GetValue("title") 
    </div> 
     <div class="abstract"> 
      @Html.Raw(item.GetValue("content")) 
     </div> 
    </div> 
} 

脚本

var pullTeaser = $('.teaser-title'); 
    menuTeaser = $('.abstract'); 

$(pullTeaser).on('click', function(e) { 
     e.preventDefault(); 
     menuTeaser.toggleClass('slide'); 
     $(this).parent().toggleClass('active'); 
    }); 

Answer 1

试试这个

var pullTeaser = $('.teaser-title'); 
    menuTeaser = $('.abstract'); 

$(pullTeaser).on('click', function(e) { 
     e.preventDefault(); 
     $(this).parent().find(menuTeaser).toggleClass('slide'); 
     $(this).parent().toggleClass('active'); 
    });