javascript - 切换被单击的元素并隐藏所有其他元素

我试图弄清楚如何才能切换被单击的元素，然后隐藏所有其他元素，仅当关闭时其他元素才会再次出现。

这是我正在工作的网站。

http://digitalspin.ph/test/manosa/campanilla-features-2/

基本上，当用户单击“兴趣点”时。将出现一个小窗口，然后在屏幕上隐藏所有其他“兴趣点”。如果用户决定关闭小号。其他兴趣点将出现。

这是HTML结构

<div class="poi poi-one">
    <form>
        <button class="show-poi-window" type="button">X</button>
    </form>
    <div class="poi-window hide animated">
        <img src="http://localhost/man/wp-content/uploads/2015/08/solid-carbonized-strandwoven-bamboo.png">
        <div class="poi-description">
            <form>
                <input class="close-poi-window" type="button" value="X">
            </form>
             <h2>Solid Carbonized Strandwoven Bamboo </h2>

            <p>The rich earthly shade of the Solid Carbonized Strandwoven Bamboo for the flooring genuinely expresses authentic Filipino home design, aside from being nature and environment friendly as well.</p>
        </div>
    </div>
</div>

这是Javascript

$(document).ready(function () {
    $('button.show-poi-window').click(function () {
        $(this).closest('div').find('.poi-window').addClass('fadeIn').removeClass('hide fadeOut');
        $('button.show-poi-window').addClass('fadeOut').removeClass('fadeIn')
        $('#slider ul.slides li').append('<div class="slide-overlay"></div>');
    })

    $('input.close-poi-window').click(function () {
        $('.poi-window').removeClass('fadeIn').addClass('fadeOut');
        $('button.show-poi-window').addClass('fadeIn').removeClass('fadeOut');
        $('.slide-overlay').remove();
    })

})

最佳答案

你可以试试这个...

首先利用您的HTML代码中的ID

您的HTML看起来应该像这样

  <div class="poi" id="poi1">
     ...your content for this goes here.....
  </div>

  <button class="button.show-poi-window">Click Me</button>

  <div class="poi" id="poi2">
     ...your content for this goes here....
  </div>

  <button class="input.close-poi-window">Click Me</button>

这是您的JavaScript

  $(document).ready(function(){
     $('button.show-poi-window').click(function(){
         $('.poi-window').hide();
         $('#poi1').show();
      });


      $('input.close-poi-window').click(function(){
          $('.poi-window').hide();
          $('#poi2').show();
      });
  });

这就是显示/隐藏内容的方式，其余的附加和动画部分可以根据您自己的兴趣进行集成，非常感谢...