1
Я искал ответ на мою проблему с высоким и низким, но не могу найти что-то, что работает. Я новичок в jquery и коде, так что несите меня. У меня есть вертикальное меню навигации по аккордеонам с вложенными ссылками. Я представил себе, что у меня есть до сих пор. Не обращайте внимания на квадраты рядом с «магазином» и «около». Вот что я работаю до сих пор:Как стилизовать текущую ссылку дочернего элемента страницы и ее родителя в меню навигации аккордеона?
- Когда я нажимаю на родительском меню в гармошку, он открывает в активное состояние с родителем выделяется как я хочу это и знак + поворота в к - знак. Когда я наводил на дочернюю ссылку в то же родительское меню, оно также выделяется как родительский. Отлично.
- Когда я нажимаю на дочернюю ссылку и загружается новая страница, меню аккордеона , в котором находился ребенок, остается открытым, чтобы указать, какое меню я сейчас . Пока все хорошо.
Но вот где я бегу к проблеме ...
Когда я нажимаю на ссылку ребенка и новые загрузки страницы, меню аккордеон остается открытым, но без особо активной государство. Я хочу, чтобы текущая дочерняя ссылка И это родительский элемент, чтобы остаться , чтобы показать, на какой странице я нахожусь.
Я надеюсь, что все это имеет смысл, и я предоставил достаточно информации. Я пробовал много вещей, включая изменение всего меню аккордеона. Но ничего не сработало. Пожалуйста помоги!
Код:
$(document).ready(function() {
$('#cssmenu > ul > li ul').each(function (index, e) {
var count = $(e).find('li').length;
var content = '<span class=\"cnt\">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
$(document).ready(function() {
if (window.location.href.indexOf("#shop-nikki-lexi") > -1) {
$('.drop-link-1').closest(".sub-level-1").css("display", "block");
}
});
$(document).ready(function() {
if (window.location.href.indexOf("#about-nikki-lexi") > -1) {
$('.drop-link-2').closest(".sub-level-2").css("display", "block");
}
});/* Base Styles */
* {
margin: 0;
padding: 0;
}
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family:"open-sans";
font-size: 15px;
position: relative;
text-transform:uppercase;
text-align:left;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: auto;
padding: 20px 0px;
}
#cssmenu > ul > li > a:link {
padding-right: 40px;
display: block;
background: #000000;
color: #f1f1f1;
border-bottom:none;
text-transform: uppercase;
}
#cssmenu > ul > li > a:visited {
text-decoration: none;
color:#f1f1f1;
}
#cssmenu > ul > li > a:focus {
text-decoration: none;
color:#f1f1f1;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
color:#808080;
}
#cssmenu > ul > li > a:active {
text-decoration: none;
color:#808080;
}
#cssmenu > ul > li > a > span {
background: #000000;
padding: 0;
display: block;
font-size: 15px;
font-weight: 400;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #808080;
}
#cssmenu > ul > li.has-sub.active > a {
color:#808080;
}
#cssmenu > ul > li.active > a span {
background: #000000;
}
#cssmenu span.cnt {
display:none;
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: none;
border-top: 0;
}
#cssmenu ul ul a {
padding: 2px 0 2px 22px;
display: block;
color: #f1f1f1;
font-size: 12px;
background-color:#000;
}
#cssmenu ul ul {
padding:5px 0px;
}
#cssmenu ul ul a:hover {
color: #808080;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
#shop:before {
content:"\e708 ";
font-size:13px;
line-height:1;
font-family:'icomoon';
}
#cssmenu > ul > li.active > a span#shop:before {
content:"\e707 ";
font-size:13px;
line-height:1;
font-family:'icomoon';
}
#cssmenu > ul > li.has-sub {
margin-left:-2px;
}
.current-menu:before {
content:"\e707 ";
font-size:13px;
line-height:1;
font-family:'icomoon';
color:#808080;
}
#cssmenu > ul > li > a.selected {
color:#808080;
}
#copy {
font-size:10px;
opacity:.4;
position:absolute;
bottom:0;
text-align:left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='cssmenu'>
<ul>
<li><a href='/'><span>Home</span></a>
</li>
<li class='has-sub'><a href='#shop-nikki-lexi'><span id="shop">Shop</span></a>
<ul class="sub-level-1" style="display:none;">
<li><a class="drop-link-1" href='/products/#shop-nikki-lexi'><span>All Products</span></a>
</li>
<li><a class="drop-link-1" href='/category/apparel-tops/#shop-nikki-lexi'><span>Tops</span></a>
</li>
<li class='last'><a class="drop-link-1" href='/category/apparel-bottoms/#shop-nikki-lexi'><span>Bottoms</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#about-nikki-lexi'><span id="shop">About</span></a>
<ul class="sub-level-2" style="display:none;">
<li><a class="drop-link-2" href='/the-story/#about-nikki-lexi'><span>The Story</span></a>
</li>
<li class='last'><a class="drop-link-2" href='/faq/#about-nikki-lexi'><span>FAQ</span></a>
</li>
</ul>
</li>
<li class='last'><a href='/contact-nikki-lexi'><span>Contact</span></a>
</li>
</ul>
</div>
Вопрос в том, как достичь этого, когда страница загружается, поэтому вы пропустили пример javascript –