jQuery slideToggle仅在隐藏其他div时

时间:2014-03-17 04:55:27

标签: jquery slidetoggle

我是jQuery和Javascript的新手,我遇到了使用slideToggle的问题。我有一个网站,其中包含一个文本正文,在页面加载时可见,下面是3 li项目。点击每个li项目将打开一个隐藏的div以显示其内容。

我想要的是只要任何隐藏的div可见,就会将slideToggle的正文文本关闭并保持关闭状态。现在,每次点击任何一个li项时,正文文本都会切换。

这是我的HTML

<div class="dropdown-container-tv">
<h1>TV Commercials</h1>
[wooslider autoslide="false" slide_page="tv-commercials" slider_type="slides" limit="15" thumbnails="default" order="ASC" order_by="date"] 
<a class="close-dropdown" id="close-tv" href="#non">Close playback window</a>
</div><!-- end dropdown -->

<div class="dropdown-container-sales">
<h1>Sales/Web Videos</h1>
[wooslider autoslide="false" slide_page="sales-videos" slider_type="slides" limit="15" thumbnails="default" order="ASC" order_by="date"]
<a class="close-dropdown" id="close-sales" href="#non">Close playback window</a>
</div><!-- end dropdown -->

<div class="dropdown-container-radio">
<h1>Radio Spots</h1>
[wooslider autoslide="false" slide_page="radio-spots" slider_type="slides" limit="15" thumbnails="default" order="ASC" order_by="date"]
<a class="close-dropdown" id="close-radio" href="#non">Close playback window</a>
</div><!-- end dropdown -->

<div class="copy-container">
<div class="content-header">
<h1>Our Razor-Sharp Work</h1>
</div>
Beard Boy delivers:
<ul class="full-width-list">
<li>Agency-experienced professionals who come up with creative advertising solutions that work.</li>
<li>Skilled producers adept at keeping costs low while giving you more spot for your money.</li>
<li>Hollywood and Southern California-based actors, voice talent, directors, editors and composers that bring added value to your project.</li>
<li>A track record of success writing and producing over 600 projects for all kinds of clients, all across America.</li>
</ul>
</div>
<ul class="portfolio-links">
<li><a class="tv" id="dropdown-tv" href="#non">TV Commercials</a></li>
<li><a class="radio" id="dropdown-radio" href="#non">Radio Spots</a></li>
<li><a class="sales" id="dropdown-sales" href="#non">Sales/Web Videos</a></li>
</ul>

这是jQuery

(function($){

    /* trigger when page is ready */
    $(document).ready(function(){

        /* slideToggle Dropdown */
        $('#dropdown').on('click',function(){

              $('.dropdown-container').slideToggle();

        });

        $('#close').on('click',function(){

              $('.dropdown-container').slideToggle();

        });

        /* Tv */
        $('#dropdown-tv').on('click',function(){

              $('.dropdown-container-tv, .copy-container').slideToggle();

        });

        $('#close-tv').on('click',function(){

              $('.dropdown-container-tv, .copy-container').slideToggle();

        });

        /* Radio */
        $('#dropdown-radio').on('click',function(){

              $('.dropdown-container-radio, .copy-container').slideToggle();

        });

        $('#close-radio').on('click',function(){

              $('.dropdown-container-radio, .copy-container').slideToggle();

        });

        /* Sales */
        $('#dropdown-sales').on('click',function(){

              $('.dropdown-container-sales, .copy-container').slideToggle();

        });

        $('#close-sales').on('click',function(){

              $('.dropdown-container-sales, .copy-container').slideToggle();

        });

有一种简单的方法吗?非常感谢任何帮助。

0 个答案:

没有答案