超级简单的布局模型： JSFiddle在这里
$(document).ready(function() {
$('.togbar').on('click', function() {
$('.togcon').slideToggle('slow');
$('i', this).toggleClass('fa-angle-up');
});
});
我要实现的目标：单击时，JQuery幻灯片切换为显示/隐藏内容。仅单击的触发器应显示其内容。
我遇到的问题：这是有关JCINK论坛上的微型配置文件的信息。每个帖子上都会有一个小档案。我必须使用类名，而不是ID（ID是自动生成的，并且我不能为每个帖子号实际启动脚本）。但是，使用类名称会使miniprofile的每个实例在单击时显示或隐藏。
我为解决该问题所做的事情：清理堆栈溢出。我已经看到了一些类似的问题的答案，但是没有一个解决方案对我有用（很可能是由于用户失败。我不了解我所看到的所有答案，也不能理解我能包装的最简单的答案）当我尝试将它们合并时，周围的思维无法按预期工作）。
我最接近解决问题的方法是通过此问题与解答
如果这不是一个好问题，我事先表示歉意。我对HTML和CSS很满意，但是一点都不精通。Javascript和JQuery完全超出了我的舒适范围。这是我第一次寻求有关stackoverflow的帮助。请保持温柔。如果您可以帮助我更好地表达我的观点，我很乐意编辑我的问题。
您的选择器范围太广：$('.togcon')正在使用该类名在页面上获取所有内容。因此，您.slideToggle('slow')也要在所有这些方法上执行该方法。
您可以使用siblings()选择器将其保留在clicked.togbar元素的上下文中。
https://api.jquery.com/siblings/
例：
$(document).ready(function() {
$('.togbar').on('click', function() {
// $(this) is a reference to the specific .togbar element that was clicked.
// .siblings('.togcon') gets the element at the same level as the .togbar with the class='togcon'
$(this).siblings('.togcon').slideToggle('slow');
$('i', this).toggleClass('fa-angle-up');
});
});
更新的小提琴：http : //jsfiddle.net/zf7b0e9m/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句