隐藏/显示切换 div答案

【问题标题】：hide/show toggle divs隐藏/显示切换 div
【发布时间】：2023-03-20 10:38:01
【问题描述】：

请帮忙！我一直在试图弄清楚当它已经打开时如何关闭一个特定的 DIV。

如果我点击 BC，DIV 应该会出现，但如果我再次点击它，DIV 应该会消失，但我不知道如何让它消失。另外，我只希望一次出现一个 DIV。

我试着做一个 else：

          $(function(){
            $(document).ready(function () {
                $(".prov").click(function(){
                    $(".clearfix").hide();
                });

                $('#BC').hide();
                $('#BC-show').click(function () {
                    if( $('#BC').toggle('slow')) {
                        return false;

                    }
                    else {
                        $('#BC').hide();
                    }
                });
                $('#AB').hide();
                $('#AB-show').click(function () {
                    if($('#AB').toggle('slow')) {
                        return false;

                    }
                    else {
                        $('#AB').hide();
                    }
                });
                });
            });

    });

感谢您的帮助。

谢谢！

【问题讨论】：

固定在这里：jsfiddle.net/WGRvw/141

标签： jquery html hide toggle show

【解决方案1】：

您似乎为每个元素附加了两个事件。

一个使用 className 另一个使用 ID

试试这个代码

$(function() {
    $(document).ready(function() {
        $('#BC, #AB').hide();

        $(".prov").click(function() {
            var id = $(this).attr('id').split('-')[0];
            $('.clearfix').not('#'+id).hide();
            $('#' + id).toggle('slow');
            return false;
        });
    });
});

Check Fiddle

只需使用类附加事件并从中获取 id 并使用它来切换。

【讨论】：

谢谢！这工作正常......但是，我只希望一次出现一个 div。
当然.. 如果是这种情况，请将其添加到您的代码中.. $('.clearfix').not('#'+id).hide(); .. 检查更新的代码
太棒了。你真棒！非常感谢！

【解决方案2】：

如果您单击显示链接会发生什么情况是 div 被隐藏，然后您调用切换基本上每次都会再次显示 div。因此没有显示出预期的效果。因此，只需省略以下内容：

更新：

            $(document).ready(function () {

                $('#BC, #AB').hide();
                $('#BC-show').click(function () {
                    $('.clearfix:visible').not('#BC').hide()
                        $('#BC').toggle('slow');
                        return false;
                });
                $('#AB-show').click(function () {
                    $('.clearfix:visible').not('#AB').hide()
                        $('#AB').toggle('slow');
                        return false;
                });
            });

【讨论】：

谢谢！但是，如果我删除 $(".prov").click(function(){ $(".clearfix").hide(); }); 这可以正常工作会出现多个 div。我只希望一次出现一个 div。

【解决方案3】：

我似乎您的第一个事件处理程序正在隐藏元素，然后正在调用切换。因此，toggle 显示元素，因为 $(".prov").click(function(){ $(".clearfix").hide(); }); 隐藏了它。

【讨论】：

【解决方案4】：

$(function() {
    $('#BC, #AB').hide();

    $('.prov').click(function() {
        $('#'+this.id.replace('-show','')).toggle('slow').siblings('div').hide('slow');
        return false;
    });
});

FIDDLE

不需要两个 DOM 就绪函数，绑定到类的第一个函数隐藏元素，绑定到 ID 的第二个函数切换元素，现在当然是隐藏的，并且将始终显示。

【讨论】：

谢谢。但是，我只希望一次出现一个 div。