jQuery 切换功能无法按预期与每个和单击功能一起使用

Question

我试图+Details在单击并显示一个元素后隐藏它xClose，反之亦然，但它不起作用。此外，当我单击+Details所有 div 时，即使我使用了each()函数。当您单击xClose我想要显示eventInfo文本时，但我什xClose至无法显示文本。$('.openInfo').each(function (index) {  $(this).click(function () {    $('.eventInfo').toggleClass('show');    $('openInfo').toggleClass('hide');    $('closeInfo').toggleClass('show');  });});$('.closeInfo').each(function (index) {  $(this).click(function () {    $('.eventInfo').toggleClass('show');    $('closeInfo').toggleClass('hide');    $('openInfo').toggleClass('show')  });});  .event{    margin-bottom: 30px;  }  .eventInfo, .closeInfo{    display: none;  }  .show{    display: block;  }  .hide{    display: none;  }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="event">            <p class="openInfo"><span>+</span>Details</p>            <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>            <p class="closeInfo"><span>x</span>Close</p>     </div>    <div class="event">            <p class="openInfo"><span>+</span>Details</p>            <p  class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>            <p class="closeInfo"><span>x</span>Close</p>    </div>

Answer 1

你需要点击听众重视.closeInfo和.openInfo，并且随后事件中，需要切换（）类其父项内.event。

$('.closeInfo, .openInfo').on('click', function() {

  let $closestEvent = $(this).closest('.event');

  $closestEvent.find('.eventInfo, .closeInfo, .openInfo' ).toggle();

});

.event {

  margin-bottom: 30px;

}

.eventInfo,

.closeInfo {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="event">

  <p class="openInfo"><span>+</span>Details</p>

  <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

  <p class="closeInfo"><span>x</span>Close</p>

</div>

<div class="event">

  <p class="openInfo"><span>+</span>Details</p>

  <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

  <p class="closeInfo"><span>x</span>Close</p>

</div>