Jquery는 한 번에 하나의 토글 div 만 열 수 있도록 허용합니다.

Question

클릭 할 때 div가 표시되도록하는 이미지 아이콘이 3 개 있습니다. Jquery가 제 모국어가 아니기 때문에 나는 막혔습니다. 한 번에 하나의 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

모서리 받침 된 div를 같은 클래스를주고, 표시 할 사업부의 부분 ID를 저장하는 data-* 속성을 사용하여 $(this) 당신이 얻을 부분 및 표시 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 -->