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() {&nbsp; let $closestEvent = $(this).closest('.event');&nbsp; $closestEvent.find('.eventInfo, .closeInfo, .openInfo' ).toggle();});.event {&nbsp; margin-bottom: 30px;}.eventInfo,.closeInfo {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="event">&nbsp; <p class="openInfo"><span>+</span>Details</p>&nbsp; <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>&nbsp; <p class="closeInfo"><span>x</span>Close</p></div><div class="event">&nbsp; <p class="openInfo"><span>+</span>Details</p>&nbsp; <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>&nbsp; <p class="closeInfo"><span>x</span>Close</p></div>