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

问题描述：

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

我已经看到关于如何折叠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; 
}

如果我理解你想在单击princi时显示sub li标签朋友标签？ – Seazoux

其实子菜单显示和链接工作正常，但我需要的是能够隐藏/折叠子菜单或下拉列表项目时，其中一个列表项目，也是持有链接被点击。那么你如何实现这一目标。 – ManUO

答

您可以隐藏菜单，当鼠标离开使用.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

希望有所帮助:)

非常感谢rktcool，让它工作！ – ManUO

没问题'：''很高兴我帮了忙。 – rktcool

但对于纯粹的CSS菜单，它不会取消隐藏悬停，对吧？ – Moesio

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

相关推荐