親タグなしでクリックして要素を非表示にする（JQueryコードを貼り付けて非表示にする要素をクリックすると）

Question

イベントをクリックすると、要素はWebサイトのどこにでも表示されます。要素をクリックしてこのコードを貼り付けると、それは<div>タグ<p>タグのように非表示にする必要があります。 条件要素の親に依存しません。

例：

jQuery(document).ready(function() { 
$(this).click(function(){ 
     $(this).hide(); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section id='app-demo'> 
      <div class="everything-but-toolbar"> 
      <div class="animation-element-panel"></div> 
      <div class="headlines"> 
       <h2>Mockingbird</h2> 
       <h3>s 

       </h3> 
       <h3> 

       </h3> 
       <span class="animation-cursor non-animating"></span> 
       <a class="try-it" href=/try><span class="arrow">Try creating wireframes for free<span></a> 
      </div> 

      <div class="animation-pointer"></div> 
      <div class="animation-grabby-hand-open"></div> 
      <div class="animation-grabby-hand-grabbing"></div> 
      <div class="animation-welcome-text"> 
       <span>Welcome</span> 
      </div> 
      </div> 
      <div class="animation-toolbar"> 
      <div></div> 
      </div> 
    </section> 
    <section id='tagline'> 
     <h1> 
     Mock up an application and show what's important: 
     </h1> 
     <p> 
     <span>the idea</span>, <span>the information</span>, <span>the interaction.</span> 
     </p> 
    </section> 
    <section id='features'> 
     <div> 
     <img class="circle-1" alt="Create mockups with drag and drop" src="/static/images/homepage-circle-1.png"></img> 
     <h2>Mock up your idea fast</h2> 
     <p> 
      Drag and drop UI elements to the page, then rearrange and resize. Go from idea to mockup in minutes. 
     </p> 
     </div> 
     <div> 
     <img class="circle-2" alt="Add multiple pages to your mockup" src="/static/images/homepage-circle-2.png"></img> 
     <h2>Link and click between pages</h2> 
     <p> 
      Link multiple mockups together and preview them interactively to get a feel for the flow of your application. 
     </p> 
     </div> 
     <div> 
     <img class="circle-3" alt="Share your mockup with collaborators" src="/static/images/homepage-circle-3.png"></img> 
     <h2>Collaborate live</h2> 
     <p> 
      Share a link, and clients and teammates can edit wireframes with you in real time. No more emailing images back and forth. 
     </p> 
     </div> 
    </section> 



<footer> 
    <div id='try-it'> 

      <a class='try-it' href="/try">Try it for free</a> or 
      <a class='log-in' href=/login>log in</a> 

    </div> 

    <nav> 
     <a href="/pricing" ><span>Pricing</span></a> 
     <a href="/privacy" ><span>Privacy</span></a> 
     <a href="/terms" ><span>Terms</span></a> 
     <a href="/help" ><span>Help</span></a> 

    </nav> 

私は特定の要素が隠されるべきページの任意の場所をクリックした場合。

これを使用しようとしましたが、機能しませんでした。ここで

Answer 1

$(this)あなたがwindowをクリックしてwindowを隠そうとしているwindowを意味します。 body内の要素をクリックして非表示にする必要があります。

$(function() { 
    $("body").children().click(function() { 
    $(this).hide(); 
    }); 
});