Question

我有3个图像图标，可触发点击时显示的div。 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设为同一个类，并使用data-*属性存储要显示的div的部分ID，使用$(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 -->

Jquery一次只允许一个切换div打开

1 个答案: