Question

我是jQuery的新手，在得到一些帮助之后！

以下是我的一些代码：

HTML

<a id="showHideMenu">Discover...</a>
<a id="showHideContact">Contact</a>

的jQuery

$(document).ready(function(){
    $("#showHideMenu").click(function(){
        $("#subMenuHere").toggle();
    });
});

$(document).ready(function(){
    $("#showHideContact").click(function(){
        $("#contactFormHere").toggle();
    });
});

目前，如果您选择“发现...”，则会显示菜单，如果您选择“联系人”，则会显示联系表单。但是我希望它能够工作，所以如果显示菜单并点击“联系”，菜单将隐藏，然后联系人将显示。

如果您需要更多信息，请与我们联系！

由于

FIDDLE

Answer 1

你只需要添加.hide（）;到你想要隐藏的元素：）

$(document).ready(function(){
    $("#showHideMenu").click(function(){
        $("#contactFormHere").hide();
        $("#subMenuHere").toggle();

    });
});

$(document).ready(function(){
    $("#showHideContact").click(function(){
        $("#subMenuHere").hide();
        $("#contactFormHere").toggle();
    });
});

Answer 2

不需要多个document.ready，在单个html页面中只使用一个。

显示/隐藏菜单和联系人使用以下查询。

$(document).ready(function(){
    $("#showHideMenu").click(function(){
        $("#contactFormHere").hide();
        $("#subMenuHere").toggle();

    });

    $("#showHideContact").click(function(){
        $("#subMenuHere").hide();
        $("#contactFormHere").toggle();
    });
});

Answer 3

您的问题不明确，您不需要复制$（文件）.ready（）;

$(document).ready(function(){
    $("#showHideMenu").click(function(){
        $("#subMenuHere").toggle();
    });
    $("#showHideContact").click(function(){
        $("#contactFormHere").toggle();
    });

});

Answer 4

如果一个菜单在另一个菜单打开之前关闭非常重要，那么您需要使用以下内容：

$(document).ready(function(){
    $("#showHideMenu").click(function(){
        if ($("#contactFormHere").is(":visible")) { // checks to see if the other element is visible
            $("#contactFormHere").toggle(400, function() {
                $("#subMenuHere").toggle();
            });
        } else {
            $("#subMenuHere").toggle();
        }
    });

    $("#showHideContact").click(function(){
        if ($("#subMenuHere").is(":visible")) {
            $("#subMenuHere").toggle(400, function() {
                $("#contactFormHere").toggle();
            });
        } else {
            $("#contactFormHere").toggle();
        }
    });
});

显示/隐藏元素jQuery

4 个答案: