單擊菜單項時摺疊或隱藏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; 
}

來源

2013-07-05 ManUO

如果我理解你想在單擊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

希望有所幫助:)

來源

2013-07-05 18:22:13 rktcool

非常感謝rktcool，讓它工作！ – ManUO

沒問題'：''很高興我幫了忙。 – rktcool

但對於純粹的CSS菜單，它不會取消隱藏懸停，對吧？ – Moesio

單擊菜單項時摺疊或隱藏CSS下拉菜單

回答

相關問題