[英]CSS - Keep the parent expanded and sub menu highlighted when clicked on the submenu.
我有一個帶有子菜單的CSS Vertical菜單。 我已經在母版頁的ASP.Net應用程序中添加了它。 每次單擊菜單都會導航到不同的aspx頁面。 單擊展開的父菜單內的子菜單中的任何子菜單時，頁面將重定向到相應的aspx頁面，但是父菜單再次折疊，並且不會使子菜單保持高亮顯示狀態。 我希望擴展父菜單，並單擊子菜單以使其高度顯示。
(function($) {
$(document).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function() {
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
});
})(jQuery);
的HTML
<div id="cssmenu" >
<ul >
<li class="highlight">
<a id="upload" href="Upload.aspx" ><span>Upload</span></a>
</li>
<li >
<a id="home" href="Home.aspx" ><span>Home</span></a>
</li>
<li>
<a href='Configurable Parameters.aspx'><span>configurable Parameters</span></a>
</li>
<li class='active has-sub'>
<a href='#'><span>Input</span></a>
<ul>
<li class='last'>
<a href="#"><span>Data - QRM</span></a>
</li>
<li class='last'>
<a href="DMSwaps.aspx"><span>Data Murex - Swaps</span></a>
</li>
<li class='last'>
<a href="DMMRates.aspx"><span>Data Murex - Market rates</span></a>
</li>
<li class='last'>
<a href="#"><span>Data - Previous Months</span></a>
</li>
</ul>
</li>
<li class='active has-sub'>
<a href='#'><span>DF Rate</span></a>
<ul>
<li class='last'>
<a href='#'><span>DF Rate - Prospective</span></a>
</li>
<li class='last'>
<a href='#'><span>DF Rate - RetroProspective</span></a>
</li>
</ul>
</li>
<li><a href='#'><span>Designation</span></a></li>
<li class='active has-sub'>
<a href='#'><span>Regression Analysis</span></a>
<ul>
<li class='last'>
<a href='#'><span>Regression Test Prospective</span></a>
</li>
<li class='last'>
<a href='#'><span>Regression Test - RetroProspective</span></a>
</li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Fair Valuation</span></a>
<ul>
<li class='last'><a href='#'><span>benchmark calculation hedged item</span></a>
</li>
<li class='last'><a href='#'><span>Test Result</span></a> </li>
<li class='last'><a href='#'><span>Delta FV</span></a> </li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Amortisation</span></a>
<ul>
<li class='last'><a href='#'><span>Amortisation</span></a> </li>
<li class='last'><a href='#'><span>Reverse Amortisation</span></a> </li>
<li class='last'><a href='#'><span>Amortisation, if hedge is ineffective</span></a>
</li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Output</span></a>
<ul>
<li class='last'><a href='#'><span>Accounting Entries</span></a> </li>
<li class='last'><a href='#'><span>Infor Next Period</span></a> </li>
</ul>
</li>
<li><a href='#'><span>Reports</span></a> </li>
</ul>
</div>
的CSS
#cssmenu {
position: relative;
margin: 0;
font-family: 'Roboto Condensed';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #00802b;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #00802b;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:url("../images/img04.gif") ;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 14px;
font-weight: 650;
-webkit-transiton: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul {
background-image: url(../images/content_grey.jpg);
color: white; nu_button.jpg) repeat-x;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #00802b;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #dddddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #dddddd;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: white;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #dddddd;
color: #777777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #dddddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666666;
}
問題在於，當您重新加載頁面時，對DOM所做的所有更改都會丟失。 一個選擇是，在網頁加載時，檢查所有的你a元素的href屬性對當前路徑。 如果匹配，則可以應用“打開”邏輯。 該代碼大致如下所示：
$(document).ready(function(){
$('a').each(function(){
if($(this).attr('href') == location.pathname.substr(1))
{
//apply your 'open' logic here
}
});
//....Other code
});
*注意：如果您的鏈接只是相對路徑，沒有查詢字符串，並且沒有前導/字符（這是它們在您的問題中的顯示方式），則此代碼有效。 如果它們是絕對的，具有查詢字符串或具有前導/ ，則必須在我的普通$(this).attr('href') == location.pathname.substr(1)比較之前進行一些字符串處理。回答。
單擊子菜單列表項時如何保持子菜單展開？ 使用cookie？
[英]How do you keep the sub menu expanded when a sub menu list item is clicked on? use cookie?
單擊第二個父菜單時，顯示其子菜單並隱藏先前單擊的父菜單的子菜單
[英]when second parent menu is clicked show its submenu and hide the submenu of previously clicked parent menu
將鼠標懸停在vuejs中的父菜單或子菜單上時如何繼續顯示動態子菜單？
[英]How to keep showing the dynamic submenu when hovering over parent menu or submenu in vuejs?
jQuery下拉菜單。 單擊后，子菜單消失。 那么，如何在單擊時使子菜單停留？
[英]Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
單擊事件時單擊下一個子菜單時如何關閉上一個打開的子菜單
[英]How to close previous opened sub menu when clicked on next submenu on click event
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.