单击并显示并隐藏多个Div时无法正常工作

Question

请帮助，我有此代码，但隐藏按钮不起作用

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

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

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

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

我不明白为什么它不起作用，谢谢

这是FIDDLE

Answer 1

对hasClass行使用if语句。如果该元素具有返回true的类，则将变量设置为布尔值而不是类名

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

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

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

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

Answer 2

您的代码中有两个问题...

第一个问题在于您的HTML结构或JS。

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

您将功能添加到两个箭头。在该回调中，您正在寻找最接近单击箭头的.trDest元素。

因此，如果单击的箭头是.expandArrow，则可以找到该元素：

<div id="trDest1" class="trDest">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
</div>

但是，如果clicked元素是.hideArrow，则没有与此类最接近的元素，并且您的其余代码将不执行任何操作：

<div id="trDest2_details" class="details">
    <p>show details</p>
    <button class="hideArrow">Hide</button>    
</div>

第二个是切换课程的部分

toggleClass可以采用两个参数：

.toggleClass( className, state )

但是您将'hideArrow'（字符串）作为状态传递。这样就不会错了……

那怎么做呢？

这应该可以解决问题：

$('.expandArrow').on('click', function () {
    $(this).closest('.trDest').addClass('visible-description').next().show();
});
$('.hideArrow').on('click', function () {
    $(this).closest('.details').hide().prev().removeClass('visible-description');
});

甚至更好？

上面的代码可以工作，但是...我不会使用它，因为HTML结构不是很语义化。您有两个独立的HTML标记，它们描述一个对象。然后在这些标签上设置类来描述该对象的状态。

我的方法会有所不同。我会选择这样的东西：

<div class="trDest">
  <div class="header">
    <!-- Some content here -->
    <button class="expandArrow">Show</button>
  </div>
  <div class="details">
    <p>Some details...</p>
    <button class="hideArrow">Hide</button>
  </div>
</div>

然后在包装元素上切换状态类。

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

这样，您为一个对象使用了一个标签，并且有一个描述其状态的类。如您所见，使用这种方法，JS代码要简单得多。

Answer 3

您可以尝试以下代码-

$('.expandArrow, .hideArrow').on('click', function() {
  if ($(this).hasClass('expandArrow')) {
    $(this).parent().next().toggleClass('visible-description');
  } else {
    $(this).parent().toggleClass('visible-description');
  }
});

.details {
  display: none;
}

.visible-description.details {
  display: block;
}

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

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

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