Перейти к публикации
webil

Выдвижное меню

Рекомендованные сообщения

webil

Делаю менюшку, вообще по сути простую и без особых замут но застрял, так как код являеться переделкой не могу додуматься как его доделать да и возможно просто знаний JS пока не хватает

 

сам код:

$(document).ready(function() {
$('a.click').click(function(){ // Отрабатываем событие, вызываемое при клике по ссылке
$('div.t-menu-panel').slideUp(); // скрываем все блоки
$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули
$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку
$('a#'+$(this).attr("id")).addClass('active');
});
});
Он работает весьма примитивно, при нажатии на ссылку сначало скрывает все открытые блоки а затем отображает только тот у которого совпадает id с сылкой на которую мы до этого кликнули, и если мы кликним на другой то этот блок закроеться и откроеться другой, но мне еще нужно чтоб при повторном нажатии на ту же ссылку он скрывал блок а ткаже заберал обратно добавляемый класс к ссылкам "active"

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ


$(document).ready(function() {

$('a.click').toggle(function(){ // Отрабатываем событие, вызываемое при клике по ссылке

$('div.t-menu-panel').slideUp(); // скрываем все блоки

$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули

$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку

$('a#'+$(this).attr("id")).addClass('active');),

function() {

$('div#'+$(this).attr("id")).slideUp();

$('a#'+$(this).attr("id")).removeClass('active')

});

});

Изменено пользователем МиксирисТ

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

$(document).ready(function() {
$('a.click').toggle(function(){ // Отрабатываем событие, вызываемое при клике по ссылке
$('div.t-menu-panel').slideUp(); // скрываем все блоки
$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули
$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку
$('a#'+$(this).attr("id")).addClass('active');),
function() {
$('div#'+$(this).attr("id")).slideUp();
$('a#'+$(this).attr("id")).removeClass('active')
});
});
Эмм новая функция не правильная, вообще перестает работать.

 

Если не ошибся то она должна была быть такой

$(document).ready(function() {
$('a.click').click(function(){ // Отрабатываем событие, вызываемое при клике по ссылке
$('div.t-menu-panel').slideUp(); // скрываем все блоки
$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули
$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку
$('a#'+$(this).attr("id")).addClass('active');},
function() {
$('div#'+$(this).attr("id")).slideUp();
$('a#'+$(this).attr("id")).removeClass('active')
});
});
Но и так не работает...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ

Скобку перепутал

$(document).ready(function() {
$('a.click').toggle(function(){ // Отрабатываем событие, вызываемое при клике по ссылке
$('div.t-menu-panel').slideUp(); // скрываем все блоки
$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули
$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку
$('a#'+$(this).attr("id")).addClass('active')},
function() {
$('div#'+$(this).attr("id")).slideUp();
$('a#'+$(this).attr("id")).removeClass('active')
});
});
Ошибаешься http://jquery-docs.ru/events/toggle/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Скобку перепутал

$(document).ready(function() {
$('a.click').toggle(function(){ // Отрабатываем событие, вызываемое при клике по ссылке
$('div.t-menu-panel').slideUp(); // скрываем все блоки
$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули
$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку
$('a#'+$(this).attr("id")).addClass('active')},
function() {
$('div#'+$(this).attr("id")).slideUp();
$('a#'+$(this).attr("id")).removeClass('active')
});
});
Ошибаешься http://jquery-docs.ru/events/toggle/

 

Почти правильно, НО

в случае если я сначало открываю первое меню

а потом второе открываю (первое закрывается все правильно)

А теперь вновь жму на первое (нет реакции так как для него выполнилась первая часть функции, а сейчас после этого клика вторая)

И еще раз жму на него же оно открывается и закрывается второе

 

как сделать так чтоб второго под ряд клика не требовалось?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ


$(document).ready(function() {

$('a.click').toggle(function(){ // Отрабатываем событие, вызываемое при клике по ссылке

$('div.t-menu-panel').slideUp(); // скрываем все блоки

$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули

$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку

$('a#'+$(this).attr("id")).addClass('active')},

function() {



if ($(this).is(":hidden")) {

$('div#'+$(this).attr("id")).slideUp();

$('a#'+$(this).attr("id")).removeClass('active');

} else {

return false};

});

});

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey
@webil, скинь мне html файл с меню, чтобы я мог его тестировать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Андрей вот

<div id="menu">
<a href="/">Главная</a>
<a href="#" id="mod01" class="click">Эраздел1</a>
<a href="#" id="mod02" class="click">Эраздел2</a>
<span>Всего слов в базе: </span>
</div>
<div id="cats-menu">
<div class="t-menu-panel" id="mod01" style="display:none">
ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
</div>

<div class="t-menu-panel" id="mod02" style="display:none">
<ul>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
<li><a href="/">Пункт</a></li>
</ul>
</div>
</div>

$(document).ready(function() {
$('a.click').toggle(function(){ // Отрабатываем событие, вызываемое при клике по ссылке
$('div.t-menu-panel').slideUp(); // скрываем все блоки
$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули
$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку
$('a#'+$(this).attr("id")).addClass('active')},
function() {

if ($(this).is(":hidden")) {
		$('div#'+$(this).attr("id")).slideUp();
		$('a#'+$(this).attr("id")).removeClass('active');
	  } else {
	   return false};
});
});
Нет этот также работает

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ


$(document).ready(function() {

$('a.click').toggle(function(){ // Отрабатываем событие, вызываемое при клике по ссылке

$('div.t-menu-panel').slideUp(); // скрываем все блоки

$('div#'+$(this).attr("id")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули

$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку

$('a#'+$(this).attr("id")).addClass('active')},

function() {

if ($('div#'+$(this).attr("id")).is(":hidden")) {

$('div#'+$(this).attr("id")).slideDown();

} else {

$('div#'+$(this).attr("id")).slideUp();};

});

});

Изменено пользователем МиксирисТ

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ
@webil, по-хорошему, здесь нужно полностью код переписывать и да ид на странице может быть только один

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

@webil, по-хорошему, здесь нужно полностью код переписывать и да ид на странице может быть только один

 

Чтото я поставил новый код твой дела пошли еще суровие)) теперь в случае если я жму первый пункт потом второй то открываются оба пункта)))

На счет ИД (id) я тебя не понял, в смысле только 1?! кто запрещает мне использовать за место class id?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ
@webil, как я понял то нужно надо это - http://jqueryui.com/demos/accordion/ , если не совсем то в интернете этого полно. Ид на то и ид что может быть только один http://htmlbook.ru/html/attr/id

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Имеется в виду что других таких же id мы не жолжны встречать, к примеру #dddd он такой должен быть один а если на странице #dddd1 и #dddd2 то в этом нет нечего страшного

В интернете как рас я такого скрипта не нашел.

То что ты скинул похоже на то что мне нужно, но она не закрывается.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ

@webil, так у тебя ссылка и див имеют одинаковые ид.

 

То что ты скинул похоже на то что мне нужно, но она не закрывается.

 

Это уверен что это можно настроить, посмотри внимательнее там должно быть написано как.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Вот такой вот код дали, работает как надо)


$(document).ready(function() { 
$('a.click').click(function(){ // Отрабатываем событие, вызываемое при клике по ссылке 
if($($(this).attr("href")).css('display')=='none'){ 
$('div.t-menu-panel').slideUp(); // скрываем все блоки 
$($(this).attr("href")).slideDown(); // Показываем тот блок, id которого = id ссылке, по которой щелкнули 
$('a.click').removeClass('active'); // И напоследок подсвечиваем активную ссылку 
$(this).addClass('active');
}else{ 
$($(this).attr("href")).slideUp(); 
$('a.click').removeClass('active')
} 
return false; 
}); 
});

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

if($($(this).attr("href")).css('display')=='none'){
Можно было проще :)

if(! $($(this).attr("href")).is(":visible")){

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

Пасиб Андрей, завтра подправлю)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
МиксирисТ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Проверка</title>
<script type="text/javascript" src="jq.js"></script>

</head>
<body>
<style type="text/css">
li{
display: block;
}
#slideMenu ul{
display: none;
}
</style>


<div id="slideMenu">
<div class="titltMenu">Заголовок меню1</div>
<ul>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
</ul>
<div class="titltMenu">Заголовок меню2</div>
<ul>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
</ul>

</div>
<script type="text/javascript">

$(function(){
$('.titltMenu').click(function(){
$(this).removeClass().addClass('active');
if($(this).next().is(':hidden')){
$('#slideMenu ul').slideUp();
};
$(this).next().slideToggle();
});
});

</script>
</body>
</html>
@webil, вот нормальный код :) , только что написал Изменено пользователем МиксирисТ

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Проверка</title>
	<script type="text/javascript" src="jq.js"></script>
  
</head>
<body>
<style type="text/css">
	li{
		display: block;
	}
	#slideMenu ul{
		display: none;
	}
</style>

  
	<div id="slideMenu">
		<div class="titltMenu">Заголовок меню1</div>
		<ul>
			<li>Пункт меню</li>
			<li>Пункт меню</li>
			<li>Пункт меню</li>
		</ul>
		<div class="titltMenu">Заголовок меню2</div>
		<ul>
			<li>Пункт меню</li>
			<li>Пункт меню</li>
			<li>Пункт меню</li>
		</ul>
  
	</div>
<script type="text/javascript">

$(function(){
	$('.titltMenu').click(function(){
		$(this).removeClass().addClass('active');
		if($(this).next().is(':hidden')){
		   $('#slideMenu ul').slideUp();
		};
		$(this).next().slideToggle();
	});
});

</script>
</body>
</html>
@webil, вот нормальный код :) , только что написал

 

Нет неподойдет

у меня подпункты меню расположены не под кнопкой вызова.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...