Question

我希望每个菜单项都展开并显示不同的内容，我有一个菜单项正常工作。但我想能够点击菜单项2将关闭当前扩展的div然后扩展一个新的div。当我点击每个菜单项时，每个内容div都会相互打开。

继承人我用来展示欢迎内容的内容。

jQuery(function($) {
    var open = false;
    $('.slide_button_welcome').click(function () {
        if(open === false) {
            $('.slide_welcome').animate({ height: '100%' }
            , 400, 'easeOutCirc');
            $(this).css('backgroundPosition', 'bottom left');
            open = true;
            return false;
        } else {
            $('.slide_welcome').animate({ height: '0px' }
            , 400, 'easeOutCirc');
            $(this).css('backgroundPosition', 'top left');
            open = false;
            return false;
        }
    });     
});

提前致谢，任何帮助都会很棒。

以下是我所指的部分的HTML：

<!-- BEGIN #primary_nav -->
<div  id="primary_nav">
    <div id="primary_nav_wrap">
        <nav>
            <ul>
                <li><a class="slide_button_welcome" href="#">Welcome</a></li>
                <li><a href="#">News</a></li>
                <li><a class="slide_button_gallery" href="#">Gallery</a></li>
                <li><a href="#">Bridal</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact</a></li>
            </ul>       
        </nav>
    </div>
</div>
<!-- End #primary_nav -->


<!-- BEGIN #slide_container -->
<div id="content_slider">

    <!-- BEGIN Welcome -->
    <div class="slide_welcome">
        <div class="slide_inner">
            <h1>Gill Clement</h1>
            <p>Gill designs and creates her jewellery from her studio outlet in the village of Mumbles, set at the Western end of Swansea Bay. A Jewellery Graduate from London’s Sir John Cass School of art in 1982, Gill came away with a reputation for innovation and experiment, constantly exploring the cutting edge and pushing boundaries of the profession that has become her life.
            </p>
            <p>Gill’s work has been recognised and heraled throughout her career, with extensive sales worldwide, from London to New york to Japan.
            Examples of Gill’s work can be found in permanent collections
            at the Museum of Wales, Birmingham City Art Gallery and the
            Contemporary Arts Society.</p>              
        </div>  
    </div>
    <!-- End Welcome -->

    <!-- BEGIN Gallery -->
    <div class="slide_gallery">
        <div class="slide_inner">
            <h1>Gallery</h1>
            <p>Lorem ipsum dolor sit amet consectetuer adipi scing elit, sed diam non numy nibh euismod tempor incidunt ut labore et dolore mahna ali quam erat volupat ostrud exerci tatiuon ullamcorper suscipit laboris nisl ut aliquip ex ea com modo consequat. Duis autem novel seum irure dolor in henderit.</p> 

            <!-- BEGIN jCarousel -->
            <ul id="mycarousel" class="jcarousel-skin-tango">
                <li>
                    <a href="#">
                        <span class="post-thumb-overlay"></span>
                        <img src="img/gallery/gallery_thumb_01.jpg" alt="" width="224px" height="360px"  />';
                    </a>
                </li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>                   
            </ul>
            <!-- End jCarousel -->

        </div>  
    </div>
    <!-- End Gallery -->


</div>      
<!-- End #slide_container -->

Answer 1

我希望我明白了。您可以做的是当您点击＆＃34; li＆＃34;时，隐藏所有div并仅显示＆＃34; div＆＃34;你需要对于这个＆＃34; divs＆＃34;容器也可以具有相同的类，在这种情况下＆＃34;内容＆＃34;

jQuery(function($) {
    var open = false;
    $('.slide_button_welcome').click(function () {
        if(open === false) {
            $('.content').css('display', 'none');
            $('.slide_welcome').animate({ height: '100%' }
            , 400, 'easeOutCirc');
            $(this).css('backgroundPosition', 'bottom left');
            open = true;
            return false;
        } else {
            $('.slide_welcome').animate({ height: '0px' }
            , 400, 'easeOutCirc');
            $(this).css('backgroundPosition', 'top left');
            open = false;
            return false;
        }
    });     
});



<!-- BEGIN #slide_container -->
<div id="content_slider">

    <!-- BEGIN Welcome -->
    <div class="content slide_welcome">
    </div>
    <!-- End Welcome -->

    <!-- BEGIN Gallery -->
    <div class="content slide_gallery">

</div>      
<!-- End #slide_container -->

如果这不是问题，请告诉我

展开div以显示不同的内容

1 个答案: