Jqueryは、一度に1つのトグルdivを開くことのみを許可します

Question

私は、クリックすると表示されるdivをトリガーする3つのイメージアイコンを持っています。 Jqueryが私の母国語ではない私は立ち往生した。一度に1つのdivだけを表示する方法はありますか？以下はこれまでの私のコードです。私はインターネットの周りを掘ったが、私のような状況に遭遇していない。どんな助けもありがとうございます。

 <div class="row"> 
      <div id="callout-icons" class="large-12 large-centered columns" data-equalizer="cta"> 
       <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta"> 
        <span class="overlay-support">Support</span> 
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/Support_v2.png" class="image" /> 
        <div class="overlay"> 
         <div class="text show-support">Make a Gift</div> 
        </div> 
       </div> 
       <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta"> 
        <span class="overlay-news">News</span> 
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/news.png" class="image" /> 
        <div class="overlay"> 
         <div class="text show-news">UW News</div> 
        </div> 
       </div> 
       <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta"> 
        <span class="overlay-inspire">Inspire</span> 
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/inspire.png" class="image" /> 
        <div class="overlay"> 
         <div class="text show-inspire">Student Finance Clubs</div> 
        </div> 
       </div> 
      </div> 
     </div> <!-- End hover icons --> 
     <div class="row"> 
      <div id="support-reveal" class="medium-6 columns"> 
       <p>Help support student development and student exposure to financial services careers, by contributing to the Badgers in Finance Fund.  Invest in other areas of UW by visiting <a href="">supportuw.org</a>.</p> 

      </div> 
     </div> 
     <div class="row"> 
      <div id="news-reveal" class="medium-6 medium-offset-6 columns"> 
       <div class="row"> 
        <div class="medium-6 columns"> 
         <p>Stay up on all things UW with a general overview of what’s happening throughout.</p> 
        </div> 
        <div class="medium-6 columns"> 
         <ul> 
         <li>Update Magazine</li> 
         <li>On Wisconsin</li> 
         <li>UW Athletics</li> 
         <li>Campus Happenings</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div id="inspire-reveal" class="medium-6 medium-offset-6 columns"> 
       <div class="row"> 
        <div class="medium-6 columns"> 
         <p>Reach out to the following UW student organizations to offer guidance and recruit future leaders..</p> 
        </div> 
        <div class="medium-6 columns"> 
         <ul> 
         <li>Graduate Finance Organization</li> 
         <li>Women in Finance and Accounting</li> 
         <li>Finance & Investment Society</li> 
         <li>Capital Management Club</li> 
         <li>Economics Students Association</li> 
         <li>Women in Economics</li> 
         <li>Investment Banking Club</li> 
         <li>Financial Occupations Club for University Students</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div><!-- End Reveal boxes --> 

、ここでスクリプトコード：

<script> 
jQuery(document).ready(function($) { 
    $(".show-support").click(function(){ 
    $("#support-reveal").slideToggle('slow') 
    }); 
    $(".show-news").click(function(){ 
    $("#news-reveal").slideToggle('slow') 
    }); 
    $(".show-inspire").click(function(){ 
    $("#inspire-reveal").slideToggle('slow') 
    }); 
}); 

</script> 

Answer 1

は、あなたが得る$(this)を使用して、div要素に同じクラスを明らかにし、表示したいのdivの部分的なIDを格納するdata-*属性を使用して与えます部分的で、そのdivを表示します。たとえば、data-reveal="support"をギフトのdivに追加すると、クリックするとid="support-reveal"のdivが表示されます。

jQuery(document).ready(function($) { 
 
    $(".show-support").click(function(){ 
 
    $('.reveal').hide() 
 
    $('#' + $(this).data('reveal') + '-reveal').slideToggle('slow'); 
 
    }); 
 
    $(".show-news").click(function(){ 
 
    $('.reveal').hide() 
 
    $('#' + $(this).data('reveal') + '-reveal').slideToggle('slow'); 
 
    }); 
 
    $(".show-inspire").click(function(){ 
 
    $('.reveal').hide() 
 
    $('#' + $(this).data('reveal') + '-reveal').slideToggle('slow'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css" rel="stylesheet"/> 
 
<div class="row"> 
 
      <div id="callout-icons" class="large-12 large-centered columns" data-equalizer="cta"> 
 
       <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta"> 
 
        <span class="overlay-support">Support</span> 
 
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/Support_v2.png" class="image" /> 
 
        <div class="overlay"> 
 
         <div data-reveal="support" class="text show-support">Make a Gift</div> 
 
        </div> 
 
       </div> 
 
       <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta"> 
 
        <span class="overlay-news">News</span> 
 
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/news.png" class="image" /> 
 
        <div class="overlay"> 
 
         <div data-reveal="news" class="text show-news">UW News</div> 
 
        </div> 
 
       </div> 
 
       <div class="medium-4 small-4 columns overlay-parent container" data-equalizer-watch="cta"> 
 
        <span class="overlay-inspire">Inspire</span> 
 
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/inspire.png" class="image" /> 
 
        <div class="overlay"> 
 
         <div data-reveal="inspire" class="text show-inspire">Student Finance Clubs</div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> <!-- End hover icons --> 
 
     <div class="row"> 
 
      <div id="support-reveal" class="medium-6 columns reveal"> 
 
       <p>Help support student development and student exposure to financial services careers, by contributing to the Badgers in Finance Fund. Invest in other areas of UW by visiting <a href="">supportuw.org</a>.</p> 
 

 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="news-reveal" class="medium-6 medium-offset-6 columns reveal"> 
 
       <div class="row"> 
 
        <div class="medium-6 columns"> 
 
         <p>Stay up on all things UW with a general overview of what’s happening throughout.</p> 
 
        </div> 
 
        <div class="medium-6 columns"> 
 
         <ul> 
 
         <li>Update Magazine</li> 
 
         <li>On Wisconsin</li> 
 
         <li>UW Athletics</li> 
 
         <li>Campus Happenings</li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div id="inspire-reveal" class="medium-6 medium-offset-6 columns reveal"> 
 
       <div class="row"> 
 
        <div class="medium-6 columns"> 
 
         <p>Reach out to the following UW student organizations to offer guidance and recruit future leaders..</p> 
 
        </div> 
 
        <div class="medium-6 columns"> 
 
         <ul> 
 
         <li>Graduate Finance Organization</li> 
 
         <li>Women in Finance and Accounting</li> 
 
         <li>Finance & Investment Society</li> 
 
         <li>Capital Management Club</li> 
 
         <li>Economics Students Association</li> 
 
         <li>Women in Economics</li> 
 
         <li>Investment Banking Club</li> 
 
         <li>Financial Occupations Club for University Students</li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div><!-- End Reveal boxes -->