查询；切换全部隐藏显示效果！如何预防？

Posted 2023-03-05

【中文标题】查询；切换全部隐藏显示效果！如何预防？

【英文标题】：JQuery; toggle hide show effects all! How to prevent?

【发布时间】：2011-06-05 11:55:19

【问题描述】：

使用我的“添加框”按钮，添加了一个框。 附上！确切地说，您将一些元素附加到框（.togglecontainer） 使用显示更多/显示 les 按钮，我想要下面的整个切换容器 该按钮，用于切换隐藏和显示。

我理解为什么所有具有该类名的容器都开始切换，但我只希望其切换按钮下方的容器切换。

我试过这段代码，但不能正常工作；

$('.togglebtn').toggle(function() 
    $('.togglecontainer').hide();       
    $(this).html('Show less');
, function() 
    $('.togglecontainer').show();
    $(this).html('Show more');
);

谁能解释我并帮助我如何做到这一点？ 提前致谢！

这是我的代码； http://jsfiddle.net/2LTd9/

【问题讨论】：

等一下，toggle 不接受两个回调。见the docs。

【参考方案1】：

您需要一个范围选择器。 试试这个：

$('.togglebtn').toggle( function()               
 $('.togglecontainer', this).hide();                     
 var txt = $(this).html();
 $(this).html((txt=='Show less')?'Show more':'Show less');      
);

编辑：根据 OP 的输入@jsfiddle 更新代码。

更新了代码并发布了@http://jsfiddle.net/Chandu/PtwWD/2/ 检查它，如果这是你想要的，请告诉我。

【讨论】：

谢谢 Cyber​​nate，它似乎没有切换可见性，但它确实在 html Show less /Show more 之间切换

@Cyber​​nate 我很感谢你的帮助，但它看起来不能正常工作； jsfiddle.net/PtwWD

@Cyber​​nate 是的，非常感谢，还有一件事；单击添加框时，它会立即隐藏，但是单击“添加框”时可以开始“显示”

更新了 jsFiddle 的代码（一处更改为 CSS，一处更改为 JS）。立即查看jsfiddle.net/Chandu/PtwWD/4

【参考方案2】：

toggle() 不接受两个回调函数。

阅读jQuery docs，了解有关如何使用切换的更多信息。