Question

我有什么： 3个按钮单击一个时，它将被隐藏，并显示相应的框在每个框中都有一个关闭框的链接点击时，该框隐藏

我需要什么：当单击关闭链接并且框关闭时，我需要再次显示该按钮

内容：按钮单击切换按钮隐藏/框显示，关闭单击切换框隐藏/按钮显示

Answer 1

你只需要将$('.showSingle').removeClass('selected');添加到$('.hide').click()函数并在其末尾添加一个返回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;
    });
});

Answer 2

当您点击每个按钮时，您有一个调用，将“已选择”类添加到按下的按钮，并从所有其他按钮中删除相同的按钮。这个类正在隐藏按钮。你需要做的是当按下关闭链接时，从所有按钮中删除该类。

$('.hide').click(function() {
    $('.targetDiv').hide();
    $('.showSingle').removeClass('selected');
});

Answer 3

试试这个。


$(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();
    });

});

Answer 4

这是一个与您当前的HTML一起使用的代码。它有两个选项，隐藏按钮文本或隐藏按钮本身。另外作为旁注，如果您使用on()继续使用它，请不要切换到.click()

JSFiddle Demo

$(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
    });
});

隐藏/显示div切换循环

4 个答案: