Question

关于下拉面板的问题。我在这里有一个jsfiddle http://jsfiddle.net/jmccommas/nJmNy/1/而我遇到的问题是我只希望能够一次打开一个面板。因此，当用户单击其他选项卡按钮时，打开的面板将在新面板打开时关闭。任何帮助将不胜感激。

这是JS：

$(function () {

    $('#dropDown a').each(function () {
        $('.panels').hide();
        var $this = $(this);
        var panels = $this.attr('href');

        $this.click(function () {
            $('.arrow').hide().fadeIn('slow');
            $('#dropDown a.active').removeClass('active');

            if ($('.panels').is(':visible')) {
                $('.panels').slideUp('slow');


            } else {
                $('.arrow').hide().fadeIn('slow');
                $(panels).slideDown('slow');
                $this.addClass('active').blur();

            }; // end else


        }); // end click

    }); // end each

    $('.close-button a, .arrow a').click(function (evt) { // This is the close button
        var panels = $('.panels');
        $(panels).slideUp(600);
        evt.preventDefault();
    }); // end close button


}); // end ready

HTML：

<div id="demoPanels">
    <ul id="dropDown">
        <li><a href="#panel1">Button 1</a></li>
        <li><a href="#panel2">Button 2</a></li>
        <li><a href="#panel3">Button 3</a></li>
        <li><a href="#panel4">Button 4</a></li>
    </ul>
    <div class="panelContainer">
    <div id="panel1" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a></div>
        <h2>panel 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    <div id="panel2" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div>
        <h2>panel 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    <div id="panel3" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div>
        <h2>panel 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    <div id="panel4" class="panels">
        <div class="arrow" align="center"><a href="#"><img src="arrow.jpg" alt=""></a> </div>
        <h2>panel 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quo, maiores, quam praesentium obcaecati voluptate harum incidunt vel eius odio facilis atque impedit aperiam modi voluptas enim ipsa dolorem consequatur!</p>
        <div class="close-button">
            <span><a href="#">X</a></span>
        </div>
    </div>
    </div>
</div>

Answer 1

尝试定位点击元素（demo）的兄弟姐妹：

$this.click(function() {
    $(panels).slideToggle(600)
        .siblings().slideUp(600);
}); // end click

jQuery下拉面板 - 一次只打开一个面板？

1 个答案: