个人中心
gpt4 book ai didi

jquery - 单击菜单项时折叠或隐藏 CSS 下拉菜单

转载 作者：太空宇宙 更新时间：2023-11-03 18:41:24 31 4
gpt4 key购买 nike

我有一个 CSS 下拉菜单，除了一件事外似乎工作正常，即每次单击子菜单内的任何链接时折叠下拉菜单项。因此，当用户单击子菜单中的链接时，他们可以使用 JQuery 查看我在同一页面中拥有的内容。

我看到了关于如何折叠下拉菜单 onClick 的不同问题，但它们似乎对我的情况没有帮助。

这是我的示例 html 和 CSS，希望有人能帮我解决这个问题。最初我不得不努力将内容加载到 

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>

                <link rel="stylesheet" type="text/css" href="css_dropdown.css" />
                <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
                <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
                <script type="text/javascript" src="jquery.js"></script>
                <title>CSS Dropdown menu with load content in DIV element</title>
        </head>
        <body>
                <ul class="sectiontitle">
                        <li>Documents <ul class="section">
                                        <li><a href="./docs/test1.html">Document 1</a></li>
                                        <li><a href="./docs/test2.html">Document 2</a></li>
                                        <li><a href="./docs/test3.html">Document 3</a></li>
                                </ul></li>
                        <li>Items <ul class="section">
                                        <li><a href="./items/test1.html">Item 1</a></li>
                                        <li><a href="./items/test2.html">Item 2</a></li>
                                        <li><a href="./items/test3.html">Item 3</a></li>
                                </ul></li>
                        <li>Products <ul class="section">
                                        <li><a href="./prods/test1.html">Product 1</a></li>
                                        <li><a href="./prods/test2.html">Product 2</a></li>
                                        <li><a href="./prods/test3.html">Product 3</a></li>
                                </ul></li>
                </ul>
                <div class="container">
                        <!-- This is an empty container for loading linked content allowing to stay on the same page as the dropdown list -->
                </div>
                <!--This script needs to be loaded last for the browser to accept to make it work.-->
                <script type="text/javascript">

$(".section").on("click", "a", function(e){
    e.preventDefault();
    $(".container").load( $(this).prop("href") );

      // Stop regular handling of "click" in IE (and some others)
    return false;
}); 
</script>
        </body>
</html>

这是CSS

    body, .title.topictitle2 {
    width:auto;
    margin-top:0;
    margin-left:.8em;
    font-family:"news cycle", helvetica, sans-serif;
    font-size: .95em;
    height:auto;

 }
#container {

    position:fixed;
    top:2.25em;
    text-transform:capitalize;
    background: #c65;
    width: 100%;
    /*overflow:inherit;*/
    z-index: 1;
}

.sectiontitle{

    margin:0;
    padding:0 1em;
    background:#194879;
    height:2.25em;
    list-style:none;

    z-index: 2;

  /*  position:fixed;*/
}

.sectiontitle > li{ /* We target only the list element inside ul.sectiontitle class*/

    float:left;
    height:100%;
    margin-right:0; /*To control how far apart from the right each <li> should be positioned from the other*/
    padding:0 .02em;
}

.sectiontitle > li{

    float:left;
    height:100%;
    color:white;
    font-family:"news cycle", helvetica, sans-serif;
    font-size:.9em;
    text-decoration:none;
    line-height:2;
    text-transform:capitalize;
    /* border-right: solid white .03em;*/
}

ul.sectiontitle li:hover{
    color:orange;
    border-bottom:.1em dotted #224480;
    /*  text-decoration:underline; */
}

/* Contextual positioning for the children under the .sectiontitle list items*/

ul.section{

    position:relative;
    left:-1.12em;

    z-index: 3;
}

ul.section{

    /*  width:10em;*/
    margin:0 0 0;
    padding:0 0 0;
    list-style:none;
    background:repeat scroll 0% 0% rgb(15, 161, 224);
    position:relative; /*Very important to keep the children ul.section aligned with its parent ul.sectiontitle*/
    top:-1000em;

}

ul.section{
    width:auto; /* dropdown list width better when set to auto*/
    margin:0 auto 0.3em auto;
    white-space:inherit;
    border: solid #224480 0.01em;
}

ul.section li a{

    height:100%;
    display:block;
    padding:0.3em 1em 0;  /*Set padding around the text in the list items under ul.section elements*/
    color:#fff;
    /*font-weight:bold;*/
    text-decoration:none;

    }

ul.section li a:hover{
    background:#69F;
    /*text-decoration:underline;*/
}

/* This controls the position of the child ul.section from the top horizontal bar*/
.sectiontitle > li:hover ul.section{
    top:.47em;
}

.container p:last-child:focus {
    background: #399;
}

最佳答案

您可以在鼠标离开时使用 .mouseleave 隐藏菜单方法。

如果你想在点击一个元素时隐藏菜单，你可以将它添加到你的代码中，在<head>最好标记。以下代码在 jQuery 中:

$(function(){
    $("a").click(function(){
        $("#menu").hide();    //or $("#menu").slideUp() if you want it to slide up instead of just disappearing.
    });
});

这告诉浏览器在单击链接时关闭菜单。如果您的网页文本中有其他链接，您可以将菜单链接包含在一个类中，并改用该类。

例如:

<ul id="menu">
   <li><a href="#" class="mitem">Item 1</a></li>
</ul>

然后 jQuery 代码将是:

$(function(){
    $(".mitem").click(function(){
        $("#menu").hide();
    });
});

这是一个完整的工作示例 - JSFIDDLE

希望有所帮助 :)

关于jquery - 单击菜单项时折叠或隐藏 CSS 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17492389/

31 4 0
文章推荐： python - 我想设置和管理我自己的本地 'autocomplete' ，这样我就可以在正确的框中填写密码
文章推荐： macros - Clojure 宏扩展
文章推荐： lisp - 在 Clozure Cl 中处理图像
文章推荐： python - 故意创建套接字错误/Python 脚本
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com