Question

我有一个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;
}

Answer 1

您可以使用.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

希望帮助:)

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

1 个答案: