jquery onclick下拉菜单 [英] jquery onclick dropdown menu

问题描述

使用Google我在stackoverflow上找到这个代码。当用户单击其父元素时，我使用它来显示一个下拉菜单，当用户再次单击父元素时，下拉菜单消失。我需要添加两个功能，但我不知道如何..这里是代码：

Using Google I found this code here on stackoverflow. I use it to show a dropdown menu when the user click on its parent element and the dropdown menu disappears when the user click again on the parent element. I need to add two "features" but I don't know how.. Here is the code:

<script>
$(document).ready(function() {
        $('.parent').click(function() {
            $('.sub-nav').toggleClass('visible');
        });
    });
</script>

<script>
$(document).ready(function() {
        $('.parent2').click(function() {
            $('.sub-nav2').toggleClass('visible');
        });
    });
</script>


<script>
$(document).ready(function() {
        $('.parent3').click(function() {
            $('.sub-nav3').toggleClass('visible');
        });
    });
</script>

<script>
$(document).ready(function() {
        $('.parent4').click(function() {
            $('.sub-nav4').toggleClass('visible');
        });
    });
</script>

<script>
$(document).ready(function() {
        $('.parent5').click(function() {
            $('.sub-nav5').toggleClass('visible');
        });
    });
</script>

这里有html：

            <li class="parent">chi siamo
                    <ul class="sub-nav">
                        <li><a href="http://www.sanremoset.it/chi_siamo/carla_evangelista.html">Dott.ssa Carla Evangelista</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/fulvio_torello.html">Dott. Fulvio Torello</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/mauro_evangelista.html">Dott. Mauro Evangelista</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/claudio_lanteri.html">Dott. Claudio Lanteri</a></li>
                        <li><a href="http://www.sanremoset.it/chi_siamo/francine_bontemps.html">Dott.ssa Francine Bontemps</a></li>
                    </ul>
            </li>

                <li class="parent2">prevenzione
                    <ul class="sub-nav2">
                        <li><a href="http://www.sanremoset.it/prevenzione/richiami_periodici.html">Richiami periodici</a></li>
                        <li><a href="http://www.sanremoset.it/prevenzione/igiene_orale.html">Igiene orale</a></li>
                        <li><a href="http://www.sanremoset.it/prevenzione/desensibilizzazioni.html">Desensibilizzazioni</a></li>
                        <li><a href="http://www.sanremoset.it/prevenzione/fluoro.html">Fluoro</a></li>
                        <li><a href="http://www.sanremoset.it/prevenzione/tests_salivari.html">Tests salivari</a></li>
                        <li><a href="http://www.sanremoset.it/prevenzione/prevenzione_tumori.html">Prevenzioni tumori</a></li>
                    </ul>
                </li>

这里是sub-nav li元素的Css代码。父类没有css我只用它来触发jquery代码：

Here the Css code for the sub-nav li element. The parent class has no css I use it only to fire the jquery code:

#menu .sub-nav li{
    float: left;
    width: 165px;
    list-style: none;
    text-align: left;
    font-size: 14px;
    font-family: "Helvetica Neue";
    border-left: 1px solid;
    border-right: 1px solid;
    background-color: #e8e8e8;
    margin-top: 0px;
}

首先，我希望菜单在用户点击时隐藏另外还有一个链接，或者在下拉菜单之外。

The first thing is that I want the menu to hide when the user click on another link or outside the dropdownmenu.

第二件事是，当用户将鼠标悬停在< li> ; / / code>与父类。

The second thing is that I want the pointer to become a hand when the user go hover the <li> with the parent class.

如何添加这两个功能？

编辑：好的，忘了第二件事，我刚刚发现如何添加这个，只需使用下面的一些CSS代码：

ok forget about the second thing, I just discovered how to add this, simply using the following piece of css code:

li { cursor: pointer; }

我发现这段代码，但它只能第一次..：

I found this code and it works but only the first time.. :

<script>
$(document).click(function(e){
    var targetbox = $('.parent');
    if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
        $('.sub-nav').css("visibility", "hidden");
    }
});
</script>

推荐答案

诀窍可以像添加隐形按钮帽子覆盖整个屏幕，所以当菜单打开时，您可以点击菜单区域外面，菜单将被关闭。

The trick can be as simple as adding an invisible "button" hat covers the whole screen, so when the menu is open, you can click outside of the menu area and the menu will be closed.

可以找到演示在我的codepen：

A demo can be found on my codepen:

/* this #menu-overlay element will cover the screen when the menu is open. Clicking on it will close the menu. */
#menu-overlay {
  display: none;
  position: fixed;
  background: purple; /* I made this purple so you can see it :) */
  opacity: 0.1; /* can be made to 0 */
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
}

http://codepen.io/Himechi90/pen/YyQrPr

此外，你不必写这么多jquery触发器。如果您将所有的子导航课程命名为sub-nav，您可以将其定位如下：

Also, you dont have to write so many jquery triggers. If you name all your sub-nav classes as "sub-nav", you can target it like below:

$('.parent').on("click",function(){
    // "this" in $(this) --> means the current clicked element
    // .find() will search the CHILDREN of the clicked element with the class "sub-nav"
    $(this).find(".sub-nav").toggle();
  });

祝你好运！ ：）

这篇关于jquery onclick下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！