单击另一个类时只显示类的下一个实例。

Question

当我单击..read more class时，我正在显示带有文本的div。我面临的问题是，当我单击..read-更多时，显示的是.幻灯片框的所有实例，而不是仅显示在特定..read more下面的实例。

以下是我的当前代码：

$( ".read-more" ).click(function() {
    $(this).css('display','none');
    $('div.slide-box').css('position','static');
    $('.accordion .txt-box').css('border','none');
    $('.accordion .txt-box p').css('margin','0');
});

我试着用：

 $.next('div.slide-box').css('position','static');

没有成功..。

我怎么能只针对div的下一个实例使用.幻灯片框呢？

下面是标记：

<div class="txt-box">
<h2>txt</h2>
<h3>txt</h3>                                        
<p>txt txt.....<span class="read-more"> -Read More</span></p>
<a class="opener" href="#">plus</a>
</div>
<div class="slide-box">
<p>Itxt txt.....<span class="read-less"> -Less</span></p>                                    
</div>

我希望能够保持标记的原样，因为它是一个wp站点。

Answer 1

接下来你需要参考一下。试试这个：

$(this).next('div.slide-box').css('position','static');

根据提供的标记，您可以尝试以下代码：

$(this).closest('.txt-box').next('div.slide-box').css('position','static');

这里假设每个实例都有一个带有类txt的div和一个带有类“幻灯片框”的div。

Answer 2

JQuery的.find()可能会有所帮助。http://api.jquery.com/find/

下面将返回页面上的第一个元素，而不是注释中指出的'next‘。

这将返回一个jquery元素数组：$('div.slide-box') 因此，这应该适用于$('div.slide-box')[0]。