Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2012, 22:55
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Открыть слайд (раздел) текущего пункта меню
Делаю вертикальное слайд-меню, используя .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>
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2012, 23:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

$(this).parent().css({'display':'block' });
кавычек нет
и проще
$(this).parent().show();
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2012, 23:43
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Не помогло, к сожалению. Исправил код строго по инструкции

$(function (){                                               // Когда страница загрузится
    $('.articalMenu a').each(function () {                   // получаем все ссылки меню
        var location = window.location.href;                 // получаем адрес текущей страницы
        var link = this.href;                                // получаем адрес ссылки текущего пункта меню
        if(location == link) {                               // при совпадении адреса ссылки и адреса окна
            $(this).parent().show();                         // открываем слайд текущего пункта меню - ТОЖЕ НЕ ПОМОГАЕТ((
            $(this).css({ 'backgroundColor': 'LightGreen' });// выделяем текущий пункт меню
        }
    });
});
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2012, 23:49
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Demath,
Оно хоть if(location == link) - выполняет ?
$(this).parent().show();
alert(link)

Ccылки действующей - нет ?
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2012, 23:58
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Demath,
Вы учтите, что ссылки в <a href="#">Функции: понятие, определение, графики</a>

должна быть полной (а не # такой , как сейчас
Ответить с цитированием
  #6 (permalink)  
Старый 18.07.2012, 00:07
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Сообщение от Deff Посмотреть сообщение
Demath,
Оно хоть if(location == link) - выполняет ?
$(this).parent().show();
alert(link)
Ccылки действующей - нет ?
Например, попав на страницу Интеграл Лебега и открыв раздел меню Интегральное исчисление, видно, что текущий пункт выделен.

Спасибо за помощь.

Сообщение от Deff Посмотреть сообщение
Demath,
Вы учтите, что ссылки в <a href="#">Функции: понятие, определение, графики</a>

должна быть полной (а не # такой , как сейчас
Разумеется))

Последний раз редактировалось Demath, 18.07.2012 в 02:09. Причина: Удалил ссылку
Ответить с цитированием
  #7 (permalink)  
Старый 18.07.2012, 00:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

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>

Последний раз редактировалось Deff, 18.07.2012 в 01:05.
Ответить с цитированием
  #8 (permalink)  
Старый 18.07.2012, 01:06
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Поправил
Ответить с цитированием
  #9 (permalink)  
Старый 18.07.2012, 01:49
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Спасибо! Все работает, как нужно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 13:36
Изменение порядка пунктов в меню vyrtime jQuery 18 17.06.2011 12:57
Как в общем меню для всех страниц поменять класс определенного пункта в зависимости о phenom Элементы интерфейса 2 08.04.2011 10:09
Связь активного пункта меню с iframe dadada1916 Элементы интерфейса 2 13.12.2010 01:03
Событие onClick при нажатии пункта меню Lex4e Общие вопросы Javascript 1 25.06.2010 17:31