0

jquery のスライド トグルを使用して 4 つの拡張可能な div があるサイトで作業しています。すべて正常に動作しますが、一度に複数の div を展開したくありません。つまり、div が展開されると、展開された他の div が閉じられる必要があります。すべての div のスタイルが異なるため、アコーディオンはオプションではないと思います。以下は私のコードです。

$(document).ready(function(){
// slidetoggles

    $("#tgx-window").hide();
        $("#tgx-button").show();
        $("#tgs-window").hide();
        $("#tgs-button").show();
        $("#tgm-window").hide();
        $("#tgm-button").show();
        $("#tgl-window").hide();
        $("#tgl-button").show();

    $('#tgx-button').click(function(){
    $('#tgx-button').toggleClass('closebutton');
    $("#tgx-window").slideToggle();
    });

    $('#tgs-button').click(function(){
    $('#tgs-button').toggleClass('closebutton');
    $("#tgs-window").slideToggle();
    });

    $('#tgm-button').click(function(){
    $('#tgm-button').toggleClass('closebutton');
    $("#tgm-window").slideToggle();
    });

    $('#tgl-button').click(function(){
    $('#tgl-button').toggleClass('closebutton');
    $("#tgl-window").slideToggle();
    });

HTML:

<a onclick="" class="show_hide" id="<?=strtolower($service['title']);?>-button"></a>
        <div class="slidingDiv" id="<?=strtolower($service['title']);?>-window">
            <?
            $infoBox = '<h1>'.$service['subtitel'].'</h1>';
            $infoBox .= $service['description'];
            echo replaceTags($infoBox);
            ?>
        </div>
4

2 に答える 2

2

HTML を知らずにこの質問に答えるのは少し難しいですが、ここに解決策があることを願っています。

HTML (私は推測します):

<div id="tgx-window">tgx window</div>
<div id="tgs-window">tgs window</div>
<div id="tgm-window">tgm window</div>
<div id="tgl-window">tgl window</div>

<button id="tgx-button">Show tgx</button>
<button id="tgs-button">Show tgs</button>
<button id="tgm-button">Show tgm</button>
<button id="tgl-button">Show tgl</button>

JavaScript:

jQuery(function($) {
    var $windows = $('#tgx-window,#tgs-window,#tgm-window,#tgl-window'),
        $buttons = $('#tgx-button,#tgs-button,#tgm-button,#tgl-button');
    $windows.hide();

    $buttons.on('click', function(e) {
        var $id;
        e.preventDefault();
        $buttons.removeClass('closebutton');
        $id = $('#' + this.id.split('-')[0] + '-window');// Get window id
        $windows.slideUp();
        if(! $id.is(':visible') ) {
            $id.slideDown();
            $(this).addClass('closebutton');
        }
    });
});

ここで実例を見ることができます。

于 2013-03-11T09:28:45.547 に答える
1

classボタンの代わりに使用idし、おそらくその親.tgx-window

$('.tgx-button').click(function(){
    $(this).toggleClass('closebutton');
    $(this).closest(".tgx-window").slideToggle();
});
于 2013-03-11T09:14:45.373 に答える