Открыть слайд (раздел) текущего пункта меню
Делаю вертикальное слайд-меню, используя .slideUp()
$(document).ready(function (){
$('.articalMenu h3').find('+ div').slideUp(1);
$('.articalMenu h3').click(function() {$(this).find('+ div').slideToggle('slow');});
});
Нужно, чтобы слайд текущего пункта меню был открыт, а сам пункт выделен. С выделением нет проблем, а вот открыть (присвоить display:block родительскому div) не получается $(function (){ // Когда страница загрузится
$('.articalMenu a').each(function () { // получаем все ссылки меню
var location = window.location.href; // получаем адрес текущей страницы
var link = this.href; // получаем адрес ссылки текущего пункта меню
if(location == link) { // при совпадении адреса ссылки и адреса окна
$(this).parent().css({ display: 'block' }); // открываем слайд текущего пункта меню - НЕ ПОМОГАЕТ((
$(this).css({ backgroundColor: 'LightGreen' }); // выделяем текущий пункт меню
}
});
});
Меню <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Вертикальное слайд-меню</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('.articalMenu h3').find('+ div').slideUp(1);
$('.articalMenu h3').click(function() {$(this).find('+ div').slideToggle('slow');});
});
$(function (){ // Когда страница загрузится
$('.articalMenu a').each(function () { // получаем все ссылки меню
var location = window.location.href; // получаем адрес текущей страницы
var link = this.href; // получаем адрес ссылки текущего пункта меню
if(location == link) { // при совпадении адреса ссылки и адреса окна
$(this).parent().css({ display: 'block' }); // открываем слайд текущего пункта меню - НЕ ПОМОГАЕТ((
$(this).css({ backgroundColor: 'LightGreen' }); // выделяем текущий пункт меню
}
});
});
</script>
<style type="text/css">
div.articalMenu {width: 198px; padding-bottom: 5px; background: #ECECEC;
border: 1px solid #A9B8C2;}
.articalMenu h3 {margin: 10px 8px 8px 8px; border-bottom: 1px solid #327AA5;
color: #115098; font: bold 13px Helvetica, sans-serif;
cursor: pointer;}
.articalMenu a {display: block; width: 165px; margin-bottom: 3px;
padding: 2px 8px 2px 23px; line-height: 1.2;
font: 12px Arial, sans-serif; color: #00C;
text-decoration: none; text-indent: -8px;}
.articalMenu a:hover {color: Crimson; background-color: LightGreen;}
</style>
</head>
<body>
<div class="articalMenu">
<h3>Введение в анализ</h3>
<div>
<a href="#">Функции: понятие, определение, графики</a>
<a href="#">Непрерывность функции</a>
<a href="#">Исследование функции</a>
</div>
<h3>Теория множеств</h3>
<div>
<a href="#">Множества: понятие, определение, примеры</a>
<a href="#">Точечные множества</a>
<a href="#">Замкнутые и открытые множества</a>
<a href="#">Мера множества</a>
</div>
</div>
</body>
</html>
|
$(this).parent().css({'display':'block' });
кавычек нет и проще $(this).parent().show(); |
Не помогло, к сожалению. Исправил код строго по инструкции
$(function (){ // Когда страница загрузится
$('.articalMenu a').each(function () { // получаем все ссылки меню
var location = window.location.href; // получаем адрес текущей страницы
var link = this.href; // получаем адрес ссылки текущего пункта меню
if(location == link) { // при совпадении адреса ссылки и адреса окна
$(this).parent().show(); // открываем слайд текущего пункта меню - ТОЖЕ НЕ ПОМОГАЕТ((
$(this).css({ 'backgroundColor': 'LightGreen' });// выделяем текущий пункт меню
}
});
});
|
Demath,
Оно хоть if(location == link) - выполняет ? $(this).parent().show(); alert(link) Ccылки действующей - нет ? |
Demath,
Вы учтите, что ссылки в <a href="#">Функции: понятие, определение, графики</a> должна быть полной (а не # такой , как сейчас |
Цитата:
Спасибо за помощь. Цитата:
|
Demath,
Замените свой код: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function (){ // Когда страница загрузится
$('div.articalMenu p').click(function(){$(this).next().slideToggle('slow');});
$('.articalMenu a').each(function () { // получаем все ссылки меню
var location = window.location.href; // получаем адрес текущей страницы
var link = this.href; // получаем адрес ссылки текущего пункта меню
if(location == link) { // при совпадении адреса ссылки и адреса окна
$(this).parent().show(); // открываем слайд текущего пункта меню
$(this).css({ 'backgroundColor': 'LightGreen' }); // выделяем текущий пункт меню
}
});
});
</script>
<style type="text/css">
div.articalMenu >div{display:none;}
div.articalMenu {width: 198px; padding-bottom: 5px;}
.articalMenu p {margin: 10px 8px 8px 8px; border-bottom: 1px solid #327AA5;
font: bold 13px Helvetica, sans-serif;
color: #115098; cursor: pointer;}
.articalMenu a {display: block; width: 167px; margin-bottom: 3px;
padding: 2px 8px 2px 23px; line-height: 1.2;
font: 12px Arial, sans-serif; color: #00C;
text-decoration: none; text-indent: -8px;}
.articalMenu a:hover {color: Crimson; background-color: LightGreen;}
.mactive {display: block;}
</style>
|
Поправил
|
Спасибо! Все работает, как нужно.
|
| Часовой пояс GMT +3, время: 04:50. |