隐藏/显示 div 切换循环答案

【问题标题】：hide/show div toggle cycle隐藏/显示 div 切换循环
【发布时间】：2012-12-14 22:32:14
【问题描述】：

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

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

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

current code

【问题讨论】：

PS，我认为有人对你投了反对票，因为你真的没有给我们任何代码，只是给我们一个指向你代码的链接，让我们筛选虽然它很烂，但匿名反对票也很烂。跨度>
下次把你的代码放到JSFiddle
我的道歉......以前从未在这里发布过并且不知道发布代码的链接（除了手头的问题外，所有内容都被剥离了）是不够的。从现在开始我会知道的，谢谢那些花时间提供帮助的人！

标签： html hide toggle show

【解决方案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;
    });
});

【讨论】：

【解决方案2】：

当您单击每个按钮时，您会调用将“选定”类添加到按下的按钮并从所有其他按钮中删除相同的类。此类使按钮隐藏。然后你需要做的是当关闭链接被按下时，从所有按钮中删除类。

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

【讨论】：

【解决方案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();
    });

});

【讨论】：

【解决方案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
    });
});

【讨论】：