如何显示/隐藏多个div

Question

我知道之前已经多次询问过这个问题，但除了硬编码jQuery文件之外我找不到解决方案...... 因此，当用户按下按钮时，我必须显示描述，并且有多个描述，每个描述都带有按钮。

这是我迄今为止所做的......

HTML：

<div id="trDest1" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
    <button class="closeArrow">Hide</button>
</div>
<div id="trDest1_details" class="details">
    <p>show details</p>
</div>

<div id="trDest2" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
    <button class="closeArrow">Hide</button>
</div>
<div id="trDest2_details" class="details">
    <p>show details</p>
</div>

<div id="trDest3" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
    <button class="closeArrow">Hide</button>
</div>
<div id="trDest3_details" class="details">
    <p>show details</p>
</div>

CSS：

.closeArrow {
  display: none;
}

.visible-description .expandArrow {
  display: none;
}

.visible-description .closeArrow {
  display: inline;
}

.visible-description + .trip_details {
  display: block;
}

.details {
    display: none;
}

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();
  });

正如你所看到的，我为每个divs编写了一个函数，我想知道是否有另一种方法来清理这些函数并只添加一个可以做同样的函数...

我无法更改HTML代码的结构。

jsfiddle：https://jsfiddle.net/q84Lnw0y/

Answer 1

您可以使用以下代码段来定位相关元素：

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

-jsFiddle

说明

$(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

Answer 2

我个人建议如下：

// 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').on('click', '.expandArrow, .hideArrow', function(e) {
  var arrow = $(this),
    nextDetails = arrow.closest('div').next('.details');

  if (arrow.is('.expandArrow')) {
    $('.details').not(nextDetails).slideUp();
    nextDetails.slideDown();
  } else {
    nextDetails.slideUp();
  }
}).find('.hideArrow').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="trDest1" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
  <button class="hideArrow">Hide</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
</div>
<div id="trDest2" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
  <button class="hideArrow">Hide</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
</div>
<div id="trDest3" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
  <button class="hideArrow">Hide</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
</div>

JS Fiddle demo

参考文献：

• click()。
• closest()。
• find()。
• is()。
• next()。
• on()。
• slideDown()。
• slideUp()。

Answer 3

这应该做你想要的事情

$('.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();
});

在这里小提琴：http://jsfiddle.net/orysrvb2/1/

Answer 4

其中一种方式：

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();
  });
}

看看这是否有帮助

Answer 5

如果您无法更改HTML，可能会使用this之类的内容：

的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();
});

Answer 6

Jsfiddle

  // Show/hide Descriptions
  $('.trDest .expandArrow').click(function() {
    $(this).parent().next().removeClass('hidden');
  });

  $('.trDest .hideArrow').click(function() {
    $(this).parent().next().addClass('hidden');
  });

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="trDest1" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
  <button class="hideArrow">Hide</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
</div>

<div id="trDest2" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
  <button class="hideArrow">Hide</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
</div>

<div id="trDest3" class="trDest">
  <!-- Some content here -->
  <button class="expandArrow">Show</button>
  <button class="hideArrow">Hide</button>
</div>
<div id="trDest2_details" class="details">
  <p>show details</p>
</div>