Javascript 如何显示/隐藏多个div

我知道这个问题以前已经被问过很多次了，但除了对jQuery文件进行硬编码外，我找不到解决方案。。。 所以，当用户按下按钮时，我必须显示一个描述，并且有多个描述，每个描述都有按钮

这就是我到目前为止所做的

HTML:

jQuery：

  // Show/hide Descriptions
  $('#trDest1 .expandArrow').click(function(){
    $('#trDest1').addClass('visible-description');
    $('#trDest1_details').show();
  });

  $('#trDest1 .closeArrow').click(function(){
    $('#trDest1').removeClass('visible-description');
    $('#trDest1_details').hide();
  });

  // Show/hide Descriptions
  $('#trDest2 .expandArrow').click(function(){
    $('#trDest2').addClass('visible-description');
    $('#trDest2_details').show();
  });

  $('#trDest2 .closeArrow').click(function(){
    $('#trDest2').removeClass('visible-description');
    $('#trDest2_details').hide();
  });

  // Show/hide Descriptions
  $('#trDest3 .expandArrow').click(function(){
    $('#trDest3').addClass('visible-description');
    $('#trDest3_details').show();
  });

  $('#trDest3 .closeArrow').click(function(){
    $('#trDest3').removeClass('visible-description');
    $('#trDest3_details').hide();
  });

如您所见，我为每个

div

编写了一个函数，我想知道是否有其他方法可以清理这些函数并只添加一个可以执行相同操作的函数

我无法更改HTML代码的结构

---

JSFIDLE:

您可以使用以下代码段来针对相关元素：

$('.expandArrow, .hideArrow').on('click', function(){
    var isExpand = $(this).hasClass('expandArrow');
    $(this).closest('.trDest').toggleClass('visible-description', isExpand).next().toggle(isExpand);
});

说明：

$(this).closest('.trDest') // Get closest ancestor with class trDest
    .toggleClass('visible-description', isExpand) // Add class `visible-description` if second param `isExpand` is true, else remove class
    .next() // Get immediate next sibling element
    .toggle(isExpand); // Show if `isExpand` is true, else hide it

方法之一：

var numberDiv = 3;
for(var i=0; i < 4; i++){
  $('#trDest' + i + ' .expandArrow').i = i;
  $('#trDest' + i + ' .closeArrow').i = i;

  $('#trDest' + i + ' .expandArrow').click(function(){
    $('#trDest'+this.i).addClass('visible-description');
    $('#trDest'+this.i+' _details').show();
  });

  $('#trDest' + i + ' .closeArrow').click(function(){
    $('#trDest' + this.i).removeClass('visible-description');
    $('#trDest'+ this.i +' _details').hide();
  });
}

var numberDiv=3；
对于（变量i=0；i<4；i++）{
$（'#trDest'+i+'.expandArrow'）。i=i；
$（'#trDest'+i+'.closeArrow'）。i=i；
$（'#trDest'+i+'.expandArrow'）。单击（函数（）{
$（'#trDest'+this.i）.addClass（'visible-description'）；
$（“#trDest”+this.i+“_details”）.show（）；
});
$（'#trDest'+i+'.closeArrow'）。单击（函数（）{
$（'#trDest'+this.i）.removeClass（'visible-description'）；
$（“#trDest”+this.i+“_details”）.hide（）；
});
}

---

查看这是否有帮助如果您无法更改HTML，可能类似的操作会起作用：

JavaScript

$('.expandArrow').click(function(){
    var parent = $(this).parent();
    parent.addClass('visible-description');
    parent.next('.details').show();
    parent.find(".hideArrow").show();
});

$('.hideArrow').click(function(){
    var parent = $(this).parent();
    parent.removeClass('visible-description');
    parent.next('.details').hide();
    parent.find(".hideArrow").hide();
});

//显示/隐藏描述
$（'.trDest.expandArrow'）。单击（函数（）{
$（this.parent（）.next（）.removeClass（'hidden'）；
});
$（'.trDest.hiderRow'）。单击（函数（）{
$（this.parent（）.next（）.addClass（'hidden'）；
});
。隐藏{
显示：无；
}

显示
隐藏
显示细节

显示
隐藏
显示细节

显示
隐藏
显示细节

我个人建议如下：

// delegating the .trDest elements to detect the 'click' events on
// the descendent elements ('.expandArrow, .hideArrow'):
$('.trDest').on('click', '.expandArrow, .hideArrow', function (e) {

    // a reference to the clicked element:
    var arrow = $(this),

        // a reference to the element you want to affect:
        nextDetails = arrow.closest('div').next('.details');

    // checking that the clicked button has the class of
    // 'expandArrow':
    if (arrow.is('.expandArrow')) {

        // it is, we find all the '.details' elements,
        // that are not the the element to affect,
        // and slide them up (hide() could be used,
        // but slideUp() is often less visually jarring):
        $('.details').not(nextDetails).slideUp();

        // then we slideDown() the element we wish to show
        // (if it's already visible then nothing happens):
        nextDetails.slideDown();

    // otherwise the element (because of the restrictions
    // in the selector for the on() method) must be
    // .hideArrow, in which case we hide the
    // nextDetails element by sliding it up:
    } else {
        nextDetails.slideUp();
    }

// here we now look for the descendant '.hideArrow'
// elements and trigger the click event in order that
// that the 'nextDetails' elements are hidden on page-load:
}).find('.hideArrow').click();


$（'.trDest'）。在（'click'，'.expandArrow，.hiderrow'，函数（e）上{
var arrow=$（此），
nextDetails=arrow.closest（'div'）。next（'details'）；
if（arrow.is（'.expandArrow'））{
$（'.details'）.not（下一个细节）.slideUp（）；
nextDetails.slideDown（）；
}否则{
nextDetails.slideUp（）；
}
}).find（'.hiderrow'）。单击（）

显示
隐藏
显示细节

显示
隐藏
显示细节

显示
隐藏
显示细节

这应该是您想要的

$('.trDest button').on('click', function() {
    var myButton = $(this),
        trDest = myButton.parent(),
        detailsId = $('#' + trDest.attr('id') + '_details');

    trDest.toggleClass('visible-description');
    myButton.hasClass('expandArrow') ? detailsId.show() : detailsId.hide();
});

在这里摆弄：
如果你知道有多少个div，你可以尝试使用for循环…仍然是例如：
“#trDest'+i+”。expandArrow'
应该是：
“#trDest'+i+”。expandArrow'
否则，你已经解决了闭包问题：）你不能用iLife代替在按钮上设置
i
<代码>（功能（i）{//code}）（i）
@Arg0n当然可以，而且通常是这样做的（或者使用传递参数的函数）很好，但最好是在默认情况下定义可见性，而不是触发单击事件：（我相信您知道…）但是，与OP的代码不同，一次只显示一个
。详细信息
（即使我知道您知道您在做什么…）：）@A.Wolff：非常感谢；我这样做是因为我是一个业余爱好者，我记得学习JavaScript（或其库）如何工作是多么困难，我多么感激一些用户花时间向我解释代码。考虑到这一点，我尽可能多地帮助教学似乎是公平的（显然是在代码的约束范围内）。小的改进，缓存
$（this）的结果。hasClass（'expandArrow'）
@Tushar Ya，我正在考虑它。让我缓存它：）并且它可以在一行中完成，但可读性较差。（'.expandArrow，.hiderrow'）。在（'click'，function（）{var hasClass=$（this）.hasClass（'expandArrow'）；$（this）.closest（'.trDest'）.toggleClass（'visible-description'，hasClass）.next（）.toggle（hasClass）；}）谢谢@A.Wolff，这很好用！作为一项改进，当用户单击展开箭头时，是否有任何函数可以滚动到可见的详细信息？@PavelValeriu Ya，有一些方法，本机js之一是
scrollIntoView
：
$（this）.closest（'.trDest'）.toggleClass（'visible-description'，isExpand.next（）.toggle（isExpand）[0].scrollIntoView（）将addClass（）切换为toggleClass（），使其按预期工作。此外，这是对OP描述中javascript的替代。无需更改CSS或html
// delegating the .trDest elements to detect the 'click' events on
// the descendent elements ('.expandArrow, .hideArrow'):
$('.trDest').on('click', '.expandArrow, .hideArrow', function (e) {

    // a reference to the clicked element:
    var arrow = $(this),

        // a reference to the element you want to affect:
        nextDetails = arrow.closest('div').next('.details');

    // checking that the clicked button has the class of
    // 'expandArrow':
    if (arrow.is('.expandArrow')) {

        // it is, we find all the '.details' elements,
        // that are not the the element to affect,
        // and slide them up (hide() could be used,
        // but slideUp() is often less visually jarring):
        $('.details').not(nextDetails).slideUp();

        // then we slideDown() the element we wish to show
        // (if it's already visible then nothing happens):
        nextDetails.slideDown();

    // otherwise the element (because of the restrictions
    // in the selector for the on() method) must be
    // .hideArrow, in which case we hide the
    // nextDetails element by sliding it up:
    } else {
        nextDetails.slideUp();
    }

// here we now look for the descendant '.hideArrow'
// elements and trigger the click event in order that
// that the 'nextDetails' elements are hidden on page-load:
}).find('.hideArrow').click();

$('.trDest button').on('click', function() {
    var myButton = $(this),
        trDest = myButton.parent(),
        detailsId = $('#' + trDest.attr('id') + '_details');

    trDest.toggleClass('visible-description');
    myButton.hasClass('expandArrow') ? detailsId.show() : detailsId.hide();
});