Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.06.2010, 15:05
Новичок на форуме
Отправить личное сообщение для pavlas Посмотреть профиль Найти все сообщения от pavlas
 
Регистрация: 07.05.2010
Сообщений: 9

jQuery- нужна помощь с всплываюшим меню
Добрый день пытаюсь создать меню со всплывающими вкладками.
Подскажите пожалуйста какую функцию нужно добавить, чтобы:
1)При загрузке одна вкладка была открыта
2)Чтобы по клику на вкладку она сворачивалась
Ниже код:
<script>
	
	$(document).ready(function () {
		
		$('#accordion li').click(function () {
										   

			//slideup or hide all the Submenu
			$('#accordion li').children('ul').slideUp('fast');	
			
			//remove all the "Over" class, so that the arrow reset to default
			$('#accordion li > a').each(function () {
				if ($(this).attr('rel')!='') {
					$(this).removeClass($(this).attr('rel') + 'Over');	
			    	}
			});
			
			
			//show the selected submenu
			$(this).children('ul').slideDown('fast');
			
			//add "Over" class, so that the arrow pointing down
			$(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');			
return false; 

		});
	
	});
	
	</script>


Буду очень признателен за помощь!

Последний раз редактировалось pavlas, 03.06.2010 в 15:25. Причина: Замечание
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2010, 15:19
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,577

оформите свой листинг BB - кодами.
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2010, 15:32
Новичок на форуме
Отправить личное сообщение для pavlas Посмотреть профиль Найти все сообщения от pavlas
 
Регистрация: 07.05.2010
Сообщений: 9

Поправил
Ответить с цитированием
  #4 (permalink)  
Старый 03.06.2010, 16:16
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,577

Что-то кода мало для менюшки - html-код еще покажите, а то неясно, что оно вообще делает.
Ответить с цитированием
  #5 (permalink)  
Старый 03.06.2010, 16:20
Новичок на форуме
Отправить личное сообщение для pavlas Посмотреть профиль Найти все сообщения от pavlas
 
Регистрация: 07.05.2010
Сообщений: 9

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Accordion</title>
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script>
	
	$(document).ready(function () {
		
		$('#accordion li').click(function () {

			//slideup or hide all the Submenu
			$('#accordion li').children('ul').slideUp('fast');	
			
			//remove all the "Over" class, so that the arrow reset to default
			$('#accordion li > a').each(function () {
				if ($(this).attr('rel')!='') {
					$(this).removeClass($(this).attr('rel') + 'Over');	
				}
			});
			
			//show the selected submenu
			$(this).children('ul').slideDown('fast');
			
			//add "Over" class, so that the arrow pointing down
			$(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');			

		});
	
	});
	
	</script>
	
	<style>
	
	/* First Level UL List */
	#accordion {
		margin:0;
		padding:0;	
		list-style:none;
	}
	
		#accordion li {
			width:267px;
		}
	
		#accordion li a {
			display: block;
			width: 268px;
			height: 43px;	
			text-indent:-999em;
			outline:none;
		}
		
		/* Using CSS Sprite for menu item */
		#accordion li a.popular {
			background:url(menu.jpg) no-repeat 0 0;	
		}

		#accordion li a.popular:hover, .popularOver {
			background:url(menu.jpg) no-repeat -268px 0 !important;	
		}
		
		#accordion li a.category {
			background:url(menu.jpg) no-repeat 0 -43px;	
		}

		#accordion li a.category:hover, .categoryOver {
			background:url(menu.jpg) no-repeat -268px -43px !important;	
		}
		
		#accordion li a.comment {
			background:url(menu.jpg) no-repeat 0 -86px;	
		}

		#accordion li a.comment:hover, .commentOver {
			background:url(menu.jpg) no-repeat -268px -86px !important;	
		}
		
		
		/* Second Level UL List*/
		#accordion ul {
			background:url(bg.gif) repeat-y 0 0;
			width:268px;
			margin:0;
			padding:0;
			display:none;	
		}
		
			#accordion ul li {
				height:30px;
			}
			
			/* styling of submenu item */
			#accordion ul li a {
				width:240px;
				height:25px;
				margin-left:15px;
				padding-top:5px;
				border-bottom: 1px dotted #777;
				text-indent:0;
				color:#ccc;
				text-decoration:none;
			}

			/* remove border bottom of the last item */
			#accordion ul li a.last {
				border-bottom: none;
			}		
		
	</style>
	
</head>
<body>
<br/><br/><br/>

<ul id="accordion">
	<li>
		<a href="#" class="popular" rel="popular">Popular Post</a>
		<ul>
			<li><a href="#">Popular Post 1</a></li>
			<li><a href="#">Popular Post 2</a></li>
			<li><a href="#" class="last">Popular Post 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#" class="category" rel="category">Category</a>
		<ul>
			<li><a href="#">Category 1</a></li>
			<li><a href="#">Category 2</a></li>
			<li><a href="#" class="last">Category 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#" class="comment" rel="comment">Recent Comment</a>
		<ul>
			<li><a href="#">Comment 1</a></li>
			<li><a href="#">Comment 2</a></li>
			<li><a href="#" class="last">Comment 3</a></li>
		</ul>
	</li>
</ul>



<br/><br/><br/>
<a href="http://www.queness.com">Queness.com</a> | <a href="">Back to Tutorial</a>





</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 03.06.2010, 16:24
Новичок на форуме
Отправить личное сообщение для pavlas Посмотреть профиль Найти все сообщения от pavlas
 
Регистрация: 07.05.2010
Сообщений: 9

http://www.queness.com/post/741/a-si...rdion-tutorial
вот собственно откуда я ее взял, просто я не шарю в программировании, взял тупо подходящий вариант, а вот как сделать так чтобы оно открывалось при загрузке и сворачивалось по клику не написано.
Ответить с цитированием
  #7 (permalink)  
Старый 03.06.2010, 16:30
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,577

Сообщение от pavlas Посмотреть сообщение
просто я не шарю в программировании, взял тупо
Так бы сразу и сказал. Тут есть для вашей братии уютненький раздельчик. Обращайся туда с указанием суммы гонорара.
Ответить с цитированием
  #8 (permalink)  
Старый 03.06.2010, 16:37
Новичок на форуме
Отправить личное сообщение для pavlas Посмотреть профиль Найти все сообщения от pavlas
 
Регистрация: 07.05.2010
Сообщений: 9

За сколько сделаешь?
Ответить с цитированием
  #9 (permalink)  
Старый 03.06.2010, 16:52
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,577

ну первую вкладку открыть - не проблема. А вот:
Цитата:
и сворачивалось по клику не написано
- там же специально так сделано чтобы все время одна вкладка была раскрыта. Что надо?
Ответить с цитированием
  #10 (permalink)  
Старый 03.06.2010, 16:55
Новичок на форуме
Отправить личное сообщение для pavlas Посмотреть профиль Найти все сообщения от pavlas
 
Регистрация: 07.05.2010
Сообщений: 9

Ну это ладно, не так важно. Главное, чтобы открывалась одна при загрузке.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь по jquery exor jQuery 7 01.06.2010 12:30
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17
Нужна помощь в ковырянии jquery. За деньги shelz Работа 2 04.02.2010 01:09
jQuery Ajax Rater Plugin и массив POST - Нужна помощь TROODON jQuery 12 30.12.2009 22:44
нужна срочная помощь с jquery Hetfield jQuery 2 19.11.2008 21:45