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

发布于 2024-09-29 01:15:39 字数 857 浏览 0 评论 0原文

我正在使用一些 jQuery 来切换某些 div 的可见性。切换发生在单击时，并且应该只影响一个 div。问题是，如果有多个 div，它们都会被打开/关闭，而不仅仅是用户尝试切换的那个。我想我需要使用“下一个”功能，但无法让它工作。这是我的 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>

有什么提示吗？谢谢！

原文

I am using some jQuery to toggle the visibility of some div's. The toggle occurs on click and should only affect one div. The problem is that if there are multiple divs, they are all toggled on/off instead of just the one a user is trying to toggle. I think I need to use the 'next' function but can't get it working. Here is my 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  <img src="/plus.gif"></p>
<div class="hiddenText">
blah blah
</div>

Any tips? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残月升风 2024-10-06 01:15:39

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

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

JS Fiddle 演示。

正如 @Polyhedron 在评论中所指出的，如果没有选择器，next() 会工作，可能会更好，目标是 $(this) 的下一个同级元素。

简单的 next() 演示，位于 JS Fiddle。

好吧，您不必，但您可以。

For what it's worth, you were right, you do have to use¹ next():

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

Demo at JS Fiddle.

As pointed out, by @Polyhedron, in the comments, next() would work, possibly better, without the selector, targetting the next sibling element of $(this).

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