jquery onclick 下拉菜单

【问题标题】：jquery onclick dropdown menujquery onclick 下拉菜单
【发布时间】：2016-01-06 17:20:23
【问题描述】：

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

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

这里是子导航 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;
}

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

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

如何添加这两个功能？

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

li { cursor: pointer; }

我找到了这段代码，它可以工作，但只是第一次......：

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

【问题讨论】：

• 我觉得您遗漏了我们应该查看的 CSS，因为我将您的代码转储到 CodePen link 中，但没有任何显示。
• 对不起，我忘了添加
• 元素的 css