打开另一个时关闭 jQuery slideToggle + 切换 class

Question

我试图让一个开关在打开另一个时关闭。我将在多个页面上展示其中的许多内容，因此我宁愿不必为每个页面都重复此代码。

此外，我无法使用 .next();或任何类似的内容，因为点击时将打开的某些内容 div 不在切换 link 的正下方。这就是为什么我将 rel 属性分配给一个变量，这样我就可以为每个 link 赋予一个唯一的 rel，然后一个按钮应该打开一个特定的 div，无论它在页面上的什么位置。

fiddle中的代码使用了hide()；在它执行之前在所有 div 上，但由于某种原因，当我这样做时 class "remove-border" 不能可靠地工作。您可以看到，如果多次单击同一个项目，边框会出现和消失。这应该会产生标签效果，因此当单击 link 时边框消失并重新出现是必不可少的。我使用了 toggleClass，因为当单击不同的 link 时需要重新添加边框。

总而言之：单击项目 1 会删除项目 1 下的底部边框并打开 div 和 class "toggle-content1"。再次单击它，它会关闭并替换边框，或者如果您单击 ITEM2，它会替换 ITEM1 下方的边框并关闭它，然后打开 ITEM2，从 ITEM2 下方移除边框。

这是我的 jQuery:

jQuery(document).ready(function($){
  $( ".toggle-button" ).click(function() {
    var rel = $(this).attr('rel');
    $(".hh").hide();
      $(this).addClass("remove-border");
    $( ".toggle-content" + rel ).slideToggle( 50, function() {

        });
    });
});

Here's my fiddle of what I've got so far。我的处理方式是否正确？

Answer 1

使用可以使用下面的代码:) :

jQuery(document).ready(function($){
  $( ".toggle-button" ).each(function(){
  $(this).click(function() {
    $('.toggle-button').next('.hh').slideUp();
     $('.toggle-button').removeClass("remove-border");
    var rel = $(this).next('.hh');
      $(this).addClass("remove-border");
        rel.slideDown();
    });
  });
});

工作fiddle:

http://jsfiddle.net/ohLdee2g/1/

这个是你创建的 rel 属性：

jQuery(document).ready(function($){
  $( ".toggle-button" ).each(function(){
  $(this).click(function() {
    $('.hh').slideUp();
    $('.toggle-button').removeClass('remove-border');
     var rel = $(this).attr('rel');
      $('.toggle-content'+rel).slideDown();
      $(this).addClass('remove-border');
  });
});
});

jsfiddle :

http://jsfiddle.net/ohLdee2g/2/

全力以赴：

jQuery(document).ready(function($){
  $( ".toggle-button" ).each(function(){
  $(this).click(function() {
    $('.hh').slideUp();
    $('.toggle-button').removeClass('remove-border');
     var rel = $(this).attr('rel');
        if($('.toggle-content'+rel).is(':visible')){
            $('.toggle-content'+rel).slideUp();
        } else {
      $('.toggle-content'+rel).slideDown();
        }
      $(this).addClass('remove-border');
  });
});
});

jsfiddle:

http://jsfiddle.net/ohLdee2g/3/

最后一个：

jQuery(document).ready(function($){
  $( ".toggle-button" ).each(function(){
  $(this).click(function() {
    $('.hh').slideUp('fast');
    $('.toggle-button').removeClass('remove-border');
     var rel = $(this).attr('rel');
        if($('.toggle-content'+rel).is(':visible')){
            $('.toggle-content'+rel).slideUp('fast');
            $('.toggle-button').removeClass('remove-border');
        } else {
         $('.toggle-content'+rel).slideDown('fast');
             $(this).addClass('remove-border');
        }

  });
});
});

http://jsfiddle.net/ohLdee2g/4/

打开另一个时关闭 jQuery slideToggle + 切换 class

Closing jQuery slideToggle + toggling class when opening another

jquery

slidetoggle