Question

我创建了一个菜单，通过点击一个div弹出一个类别，但是我也希望在按下一个新类别时关闭其他类别div。我对Jquery很陌生，即使第一个脚本易于编写，我也不确定如何继续。我尝试使用我在这里找到的答案，这些答案在链接的jsfiddle中完美运行，但当我尝试在我的页面中使用它们时，它们都没有用。以下是一个示例：http://jsbin.com/eCAwiVA/1 请记住，我试图在tumblr页面上这样做。

我花了好几个小时试图理解，如果有人能解释我会很高兴 - 非常感谢你提前！

Answer 1

这是一个快速的JS Bin，回答了你的问题：http://jsbin.com/eCAwiVA/15/

注意：如果可以，您应该只使用一个$(document).ready()函数并注册所有事件，就像我做的那样。

解决方案：您可以看到，我只是使用jQuery的.is() - 方法来检查其他<div>是否可见。如果它是可见的，我只是隐藏它，否则我只是切换应该打开的<div>。

代码：

$(document).ready(function(){
    $("#cabout").click(function () {
        if ($("#popsocial").is(":visible")) {
            $("#popsocial").hide();
        }

        $("#popabout").toggle();
    });

    $("#csocial").click(function () {
        if ($("#popabout").is(":visible")) {
            $("#popabout").hide();
        }

        $("#popsocial").toggle();
    });
});

Answer 2

如果你想保留这个HTML构造，就像之前的帖子建议我建议的那样，你可以检查切换元素的兄弟姐妹是否是可变的。如果它们可见，您也可以切换它们。

    $(document).ready(function(){
        $("#cabout").click(function () {
            $("#popabout").toggle();
            if ($("#popabout").siblings().css('display') != 'none'){
                $("#popabout").siblings().toggle();
            }
        });

        $("#csocial").click(function () {
            $("#popsocial").toggle();
            if ($("#popsocial").siblings().css('display') != 'none'){
                $("#popsocial").siblings().toggle();
            }
        });
    });

http://jsfiddle.net/5cf9E/3/

Jquery菜单 - 切换div时隐藏其他div

2 个答案: