jquery onclick 下拉菜单

jquery onclick dropdown menu

提问by P.Davide

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:

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

<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>

Here there is the html:

这是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>

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:

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

#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.

第一件事是，当用户单击另一个链接或下拉菜单之外时，我希望菜单隐藏。

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

第二件事是，当用户将鼠标悬停<li>在父类上时，我希望指针变成一只手。

How to add these two features?

如何添加这两个功能？

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

编辑：好吧忘记第二件事，我刚刚发现如何添加它，只需使用以下css代码：

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>

回答by Himechi90

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.

诀窍可以很简单，就像添加一个覆盖整个屏幕的隐形“按钮”帽子一样，因此当菜单打开时，您可以在菜单区域外单击，菜单将关闭。

A demo can be found on my codepen:

可以在我的 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

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

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:

此外，您不必编写这么多 jquery 触发器。如果您将所有子导航类命名为“子导航”，您可以像下面这样定位它：

$('.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();
  });

Good luck! :)

祝你好运！:)

回答by rafahell

The javascriptcode needs to be shortened and you don't need to repeat $(document).readyfor each click. Also the markup could be better, I suggest instead of <ul>as container for <li>, use <div>element.

将javascript被缩短代码需要和不需要重复$(document).ready每次点击。此外，标记可能会更好，我建议不要将其<ul>用作容器<li>，而是使用<div>元素。

This link on fiddle might be helpful, have a look on fiddle

小提琴上的这个链接可能会有所帮助，看看小提琴

http://www.jsfiddle.net/NFTFw/29/

http://www.jsfiddle.net/NFTFw/29/