Question

当我打开另一个时，我正试图让一个切换关闭。我将在几个页面上有很多这样的内容，所以我宁愿不必为每个页面复制这些代码。

另外，我不能使用.next（）;或类似的东西，因为点击时打开的某些内容div不会直接位于切换链接下方。这就是我将rel属性赋给变量的原因，所以我可以为每个链接赋予一个唯一的rel，然后一个按钮应该打开一个特定的div，无论它在页面的哪个位置。

小提琴中的代码使用hide（）;在执行之前的所有div上，但由于某种原因，当我这样做时，“删除边框”类不能可靠地工作。您可以看到是否多次单击同一项目，边框出现并消失。这应该是制作标签效果，因此在点击链接时边框消失并重新出现是必不可少的。我使用了toggleClass，因为当点击不同的链接时需要重新添加边框。

总结：点击第1项删除第1项下的底部边框，然后使用“toggle-content1”类打开div。再次单击它并切换为关闭并替换边框OR如果单击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();
    });
  });
});

工作小提琴：

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 +切换类

1 个答案: