Question

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

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

首先，当用户点击其他链接或在下拉菜单外部时，我希望隐藏菜单。

第二件事是，当用户将<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>

Answer 1

技巧可以简单到添加一个不可见的“按钮”帽子覆盖整个屏幕，因此当菜单打开时，您可以单击菜单区域外部，菜单将被关闭。

可以在我的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触发器。如果您将所有子导航类命名为“子导航”，则可以将其定位如下：

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

祝你好运！：）

Answer 2

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

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

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

jquery onclick下拉菜单

2 个答案: