jquery onclick 下拉菜单

Posted 2023-05-08

【中文标题】jquery onclick 下拉菜单

【英文标题】：jquery onclick dropdown menu

【发布时间】：2016-01-06 17:20:23

【问题描述】：

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

<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

【参考方案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();
  );

祝你好运！ :)

【讨论】：

嗨，很高兴它成功了。你指的是哪个链接？我相信 .sub-nav 内的链接是可点击的？

是的，当我点击出现菜单覆盖（粉红色覆盖）但我无法点击菜单的其他链接（子导航）

你能再试试看codepen.io/Himechi90/pen/YyQrPr吗？它对我有用 :) 如果您的意思是它不适用于您的项目，请检查您的 z-index 设置是否正确。

是的，演示有效，所以我遗漏了一些东西。我在我的页面上添加了 js 代码并将其添加到我的菜单中： 然后我将此添加到 css：#menu-overlay display: none;位置：固定；背景：紫色； /* 我做了这个紫色，所以你可以看到它 :) / opacity: 0.1; / 可以设为0 */ width: 100%;高度：100%； z-index：0；顶部：0；左：0；

我明白了。您需要添加“位置：相对；z-index：5；”到您的#menu 元素，它应该可以工作。如果是，请将我的答案标记为已接受的答案好吗？ ;)

【参考方案2】：

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

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

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