jquery on toggle 仅更改周围的 div 类

Question

当我点击隐藏信息链接时，它会显示显示信息，但它也会更改页面上所有其他框上的文本，当我点击隐藏信息它会切换 div class="revealBox" 上的 test 类，但它会在所有框上执行此操作，我想将其保留在相关框上。

我知道这将与 $(this) 有关，我只是不知道如何实现它。

这是我的 jquery

$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Hide Information';
var hideText='Show Information';
var is_visible = false;
$('.collapseLink').append('<span class="dottedBot">'+showText+'</span>');
$('.revealBoxContents').show();
$('a.collapseLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.revealBoxContents').slideToggle('slow');
// return false so any link destination is not followed
return false;
});
// toggle the bottom link
$('.collapseLink').click(function(){
     $(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');    
     $(".collapseLink").html( (!is_visible) ? showText : hideText);
    $(this).parent('.item').toggleClass('current');

}); 

$(".revealBoxTop a").click(function(){
        $(this).toggleClass("closed").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

    $('.revealBox a').click(function() {
        $(".revealBox").toggleClass("test");
    });


});

这是网址

http://satbulsara.com/NSJ-local/eqs1.htm

Answer 1

编辑

好的，我又试了一次 - 在没有测试的情况下改变了很多！请用下面的代码替换您的代码并提供建议。如果这不起作用，最好在http://www.jsbin.com 或http://www.jsfiddle.net 上设置演示

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Hide Information',
    hideText='Show Information';

$('.collapseLink').append('<span class="dottedBot">'+showText+'</span>');
$('.revealBoxContents').show();

// toggle the bottom link
$('.revealBox .collapseLink').click(function(e){
         e.preventDefault();
         var $targetContainer = $(this).parents('.revealBox').find('revealBoxContents');
         $targetContainer.stop(true, true).slideToggle('slow');
         if ($targetContainer.is(:visible) {
             $(this).html(showText);
         else {
             $(this).html(hideText);
         }
         // this line below doesn't do anything - can't find an element .item
         $(this).parent('.item').toggleClass('current');
}); 

$('.revealBox a').click(function() {
    // ONLY TARGET PARENT REVEAL BOX
    $(this).parents(".revealBox").toggleClass("test");
});

希望我们越来越近了！

编辑 3

继续使用您的示例 html 制作模型： http://jsbin.com/iceyi3/edit 编辑： 修改版本：http://jsbin.com/iceyi3/2/edit

我在上面的代码中发现了一些粗心的错误 - 所以我为此道歉！ “隐藏文本”/“显示文本”的重复是因为在某些区域它们存在于 html 中以及由 javascript 添加。