Question

我试图想象我如何切换一个被点击的元素，然后隐藏所有其他元素，只有在关闭其他元素时才会再次出现。

这是我正在处理的网站。

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();
    })

})

Answer 1

你可以试试这个......

首先在你的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();              
      });
  });

这就是你如何显示/隐藏你的内容，其余的追加和动画部分可以根据你自己的兴趣进行整合，非常感谢...

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

1 个答案: