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

jQuery Drop Down Panels - Only one panel open at a time?

本文关键字：一个 jQuery 一次      更新时间：2023-09-26

下拉面板上的问题。我这里有一个 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>

尝试定位点击元素的同级元素（演示）：

$this.click(function() {
    $(panels).slideToggle(600)
        .siblings().slideUp(600);
}); // end click
相关文章：