Question

我有问题。我有类似的div与相同的类。当我使用.comments-toggle课程点击（切换＃1）时，我只需要.toggle-container下方的div来展开。正如此代码所示，它还会触发下面的.toggle-container div（切换＃1）div进行扩展。

如何点击切换＃1并且只有类toggle-container下面的div展开而不是所有带有类切换容器的div？

*** EDITED HTML ****

我只需要更改JQUERY，请不要将HTML更改为解决方案。

我希望这是有道理的。

HTML：

<div>
  <div class="comments-toggle">Toggle #1</div>
</div>

<div>
   <div class="comments-expanded-container toggle-container">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
 </div>
 </div>

 <div>
   <div class="comments-toggle">Toggle #2</div>
 </div>

<div>
   <div class="comments-expanded-container toggle-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
  </div>
 </div>

CSS：

.comments-expanded-container {
display: none;
}

.expand {
display: inline-block;
}

JQUERY：

 (function () {
     $('.comments-toggle').on('click', function(event) {
         $('.toggle-container').toggleClass('expand');
     })
})();

JS FIDDLE： https://jsfiddle.net/Jakwakwa/c2ogevff/

*** EDITED HTML ****

Answer 1

在点击监听器中使用$(this).next() target next toggle-container - 请参阅下面的演示：

＆＃13;

(function() {
  $('.comments-toggle').on('click', function(event) {
    $(this).next('.toggle-container').toggleClass('expand');
  })
})();

＆＃13;

.comments-expanded-container {
  display: none;
}

.expand {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments-toggle">Toggle #1</div>

<div class="comments-expanded-container toggle-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>

<div class="comments-toggle">Toggle #2</div>

<div class="comments-expanded-container toggle-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>

＆＃13;

解决JQuery中的问题

1 个答案: