Question

我正在使用一些jQuery来切换某些div的可见性。切换发生在点击上，应该只影响一个div。问题是如果有多个div，它们都会打开/关闭，而不仅仅是用户试图切换的那个。我想我需要使用'next'功能，但无法使其正常工作。这是我的jQuery：

jQuery(function(){
 jQuery(".toggle").click(function(){
  jQuery(".hiddenText").slideToggle("fast");
        jQuery(this).html(function(i,html) {
            if (html.indexOf('More') != -1 ){
               html = html.replace('More','Less');
            } else {
               html = html.replace('Less','More');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.gif') != -1)? '/minus.gif' :'/plus.gif';
    });
});
});

HTML：

<p class="toggleText">More Info &nbsp;<img src="/plus.gif"></p>
<div class="hiddenText">
blah blah
</div>

任何提示？谢谢！

Answer 1

对于它的价值，你是对的，你必须使用¹ next()：

$(document).ready(
    function(){
        $('.toggleText').click(
            function(){
             $(this).next('.hiddenText').toggle();   
            }
            );
    }
    );

Demo at JS Fiddle

正如@Polyhedron所指出的那样，在评论中，next()可能会更好，没有选择器，可以定位$(this)的下一个兄弟元素。

Demo of the plain ol' next(), at JS Fiddle

嗯，你不必须，但你可以。

Answer 2

我认为问题源于使用类作为选择器

jQuery（“。toggle”）。click（）表示点击了toggleText类的元素 jQuery（“。hiddenText”）。slideToggle //选择所有带有.hiddenText类的元素和slideToggle这就是为什么你们所有的div都在打开。

而不是jQuery（“。hiddenText”）。slideToggle（“fast”）;

尝试$（this）.next（“。hiddenText”）。slideToggle（“fast”）;

jQuery切换打开所有div而不是下一个

2 个答案: