0

ドロップダウン パネルに関する質問。私はここにjsfiddleを持っていますhttp://jsfiddle.net/jmccommas/nJmNy/1/そして私が抱えている問題は、一度に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>
4

1 に答える 1

0

クリックした要素の兄弟をターゲットにしてみてください ( demo ):

$this.click(function() {
    $(panels).slideToggle(600)
        .siblings().slideUp(600);
}); // end click
于 2013-10-05T17:25:17.820 に答える