Question

我正在写下拉菜单，我希望下拉菜单由javascript控制。

我的下拉菜单隐藏了视图max-height: 0px;的子菜单，当点击相应的锚标记时，我使用以下函数将其max-height参数更改为400px：

function drop_down(name) {
    document.getElementById(name).style.maxHeight = "400px";
}

到目前为止一切顺利。问题是元素的max-height保持在400像素，子菜单不会隐藏。所以我认为我应该针对鼠标的点击，当发生这种情况时，检查是否有任何400px的元素并将其更改回0。

$('html').click(function() {
   var max_h = document.getElementsByClassName("nav_content");
   var i;

   for(i = 0 ; i < max_h.length ; i++)
   {
        if(max_h[i].style.maxHeight == "400px")
        {
            max_h[i].style.maxHeight = "0px";       
        }
    }
});

该功能会跟踪每次点击，甚至是用于显示子菜单的点击。所以我的问题是：在点击我的子菜单后，有没有办法只激活第二个功能？因为我总是希望显示菜单后出现的点击关闭子菜单。

HTML：

<body>
    <div class="nav_container">
        <nav class="nav_main">
            <div class="logo">
                <a href="#">
                    <img src="../majo.png" alt="logo">
                </a>
            </div>
            <ul class="nav" id="nav">
                <li>
                    <a href="user_menu.php" class="nav_item">Home</a>
                </li>
                <li>
                    <a href="#" class="nav_item" onclick="drop_down('nav_consul')">Consultas</a>
                    <div id="nav_consul" class="nav_content">
                        <div class="nav_sub">
                            <ul>
                                <li>
                                    <a href="consul/inf_dia_dia">Informação Dia a Dia</a>
                                </li>
                                <li>
                                    <a href="consul/tot_men">Totais Mensais</a>
                                </li>
                                <li>
                                    <a href="consul/cur_tar">Tarifário Atual da Rede</a>
                                </li>
                                <li>
                                    <a href="consul/dat_esp">Data específica</a>
                                </li>
                                <li>
                                    <a href="consul/sys_act">Atividade do Sistema</a>
                                </li>
                                <li>
                                    <a href="consul/coimas">Coimas</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="nav_item" onclick="drop_down('nav_simul')">Simulações</a>
                    <div id="nav_simul" class="nav_content">
                        <div class="nav_sub">
                            <ul>
                                <li>
                                    <a href="simul/add_simple_tar">Criar tarifa Simples</a>
                                </li>
                                <li>
                                    <a href="simul/add_complex_tar">Criar tarifa Complexa</a>
                                </li>
                                <li>
                                    <a href="simul/simular">Simular com Nova Tarifa</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="nav_item" onclick="drop_down('nav_prefs')">Preferências</a>
                    <div id="nav_prefs" class="nav_content">
                        <div class="nav_sub">
                            <ul>
                                <li>
                                    <a href="prefs/list_access">Lista de acessos</a>
                                </li>
                                <li>
                                    <a href="prefs/alt_pass">Alterar Password</a>
                                </li>
                                <li>
                                    <a href="prefs/alt_dados_conta">Alterar Dados de Conta</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="../log_out.php" class="nav_item">Log Out</a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="content_main">

    </div>
    <footer></footer>
    <script src="../js/jQuery.js"></script>
    <script src="../js/user_menu.js"></script>
    <script src="../js/user_nav.js"></script>
    <script src="../js/user_clear_sub_menu.js"></script>
</body>

Answer 1

这是一个简单的解决方案：

创建以下CSS样式：

.nav_content.visible {
    max-height: 400px;
}
.nav_content.invisible {
    max-height: 0px;
}

将nav_content的溢出属性设置为隐藏：

.nav_content{
    overflow: hidden;
}

现在将类invisible添加到您的子菜单中，如果您希望它们在默认情况下不可见（您可以在标记中或通过js代码手动执行此操作）：

手动，例如：

<div id="nav_prefs" class="nav_content invisible">

或通过代码（在加载元素之后）：

$(".nav_content").addClass("invisible);

现在，如果您只是需要调整drop_down功能来切换元素的invisible / visible类：

function drop_down(dropdownID){
    $('#'+dropdownID).toggleClass("visible invisible");
}

更新：要在所有其他地方点击时使所有可见的子菜单消失，请在加载窗口时使用这段代码：

$(document).on('click', function (e) {
    if (!$(e.target).is('.nav_item') && !$(".nav_item").has(e.target).length !== 0) {
        $('.nav_content.visible').toggleClass("visible invisible");
    }
});

如果您只希望一次显示一个子菜单，则可以使用此版本的drop_down功能：

function drop_down(dropdownID) {
    $('.nav_content.visible').toggleClass("visible invisible");
    $('#' + dropdownID).toggleClass("visible invisible");
}

可以找到工作小提琴here

编辑：由于您在原始代码中使用了jQuery，我认为答案也可以使用jQuery

Answer 2

您想要在文档上创建一个点击处理程序，然后检查点击的目标。如果单击的目标具有某个类，请使用菜单行为。如果没有，或者它是子菜单，请关闭菜单。

这是一个有多个例子的问题：

How do I close menu on click and when the user clicks away?

另外，我建议不要使用max-height来隐藏和显示。由于您已经使用了jquery，因此您可以使用hide（）和show（）。

还有一件事：既然您已经使用了jquery，那么您就不需要使用这些来电：document.getElementById(name)。您可以$("#yourId")或document.getElementsByClassName("nav_content");使用$(".your-class")

Answer 3

在这种情况下，您可以使用 jQuery.not() 方法从jQuery选择中排除下拉菜单，这是您需要的：

$('html').not(document.getElementsByClassName("nav_container")[0]).click(function() {
//As you can pass an element to it

你也可以在第一个选择器中使用:not，如下所示：

 $('html:not(div.nav_container))

Answer 4

看起来您将点击事件附加到整个文档。我认为您只需将$('html').click(function() {更改为$('sub-menu-selector').click(function() {到

之类的内容

在我点击子菜单
后才激活第二个功能

除此之外，因为它只是jQuery的一部分，如果您不在其他地方使用它，我会将其替换为addEventListener和attachEvent，但也许这样做了只是我:)）

单击后更改最大高度元素

4 个答案: