0

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

例如请查看：http: //jsfiddle.net/WGRvw/

如果我点击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();
                    }
                });
                });
            });

    });

感谢您的帮助。

谢谢！

4

4 回答 4

3

您似乎将两个事件附加到每个元素。

一个使用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;
        });
    });
});​

检查小提琴

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

于 2012-11-29T16:28:16.083 回答
1

如果您单击显示链接会发生什么情况是 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;
                });
            });
于 2012-11-29T16:31:19.460 回答
0

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

于 2012-11-29T16:30:48.430 回答
0 
$(function() {
    $('#BC, #AB').hide();

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

小提琴

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

于 2012-11-29T16:32:23.227 回答