1

私が持っているもの：3つのボタンをクリックすると非表示になり、対応するボックスが各ボックスに表示されます。クリックするとボックスが非表示になるとボックスを閉じるためのリンクです

必要なもの: 閉じるリンクをクリックしてボックスを閉じると、ボタンを再度表示する必要があります

概要: ボタンをクリックするとボタンの非表示/ボックスの表示が切り替わり、クリックを閉じるとボックスの非表示/ボタンの表示が切り替わります

現在のコード

4

4 に答える 4

1

$('.showSingle').removeClass('selected');関数に追加し$('.hide').click()、その最後に return false を追加して、リンクの href が呼び出されないようにする必要がありました (URL に # を入れます)。

$(function(){
    $('.showSingle').click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        $('.targetDiv').hide();
        $('#div' + $(this).data('target')).show();
    });

    $('.hide').click(function() {
        $('.targetDiv').hide();
        $('.showSingle').removeClass('selected');
        return false;
    });
});
于 2012-12-14T22:54:06.860 に答える
0

各ボタンをクリックすると、押されたボタンに「選択された」クラスを追加し、他のすべてのボタンから同じクラスを削除する呼び出しがあります。このクラスはボタンを非表示にしています。次に行う必要があるのは、閉じるリンクが押されたときに、すべてのボタンからクラスを削除することです。

$('.hide').click(function() {
    $('.targetDiv').hide();
    $('.showSingle').removeClass('selected');
});
于 2012-12-14T22:45:24.347 に答える
0

これを試して。


$(window).load(function(){
$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    var srcId = $(this).data('target');
    $('#div' + srcId).show();
    $('.targetDiv').click(function(){
        $('.targetDiv').hide();
        $(".showSingle[data-target='" +srcId +"']").show();
    });

});
于 2012-12-14T22:52:04.170 に答える
0

これは、現在の HTML で動作するコードです。ボタンのテキストを非表示にするか、ボタン自体を非表示にするかの 2 つのオプションがあります。また、補足として、使用しon()続ける場合は、切り替えないでください。.click()

JSFiddleデモ

$(function() {
    $('.targetDiv').hide(); //Start off with boxes hidden

    $('.showSingle').on('click', function() { //Link clicked
        $('.targetDiv').hide(); //Hide any open boxes
        $('.selected').removeClass('selected'); //Show all buttons
        //$(this).children('div').addClass('selected'); //Hide button text
        $(this).addClass('selected'); //Hide button box
        var id = $(this).data('target'); //Get desired target
        $('#div'+id).show(); //Show target box
        return false; //Stop link from going anywhere
    });

    $('.hide').on('click', function() {
        $('.targetDiv').hide(); //Hide any open boxes
        $('.selected').removeClass('selected'); //Show all buttons
        return false; //Stop link from going anywhere
    });
});​
于 2012-12-14T23:30:00.047 に答える