Question

请帮忙！我一直试图找出如何在特定DIV已经打开时关闭它。

如果我点击 BC ，DIV应该出现，但是如果我再次点击它，DIV应该会消失，但我无法弄清楚如何让它消失。另外，我一次只想要一个DIV出现。

我试着做其他事情：

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

    });

感谢您的帮助。

谢谢！

Answer 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并使用它来切换。

Answer 2

如果你单击显示链接会发生什么，div会被隐藏，而你调用toggle，每次都会再次显示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;
                });
            });

Answer 3

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

Answer 4

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

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

FIDDLE

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

隐藏/显示切换div

4 个答案: