Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.03.2013, 16:10
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

jquery выпадающая информация при нажатии на ссылку
Есть у меня нехитрый код который открывает выпадающий текст при нажатии на ссылку (2 ссылки и более)... Всё работает всё в порядке, но вот мне надо что бы когда я "открываю" следующий выпадающий текст предыдущий закрывался (что бы открыт был только один), что надо вставить в мой код что бы так было, или хотя бы исходник где такое реализовано, а дальше я определюсь
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="windows-1251">
	<title>Квартира</title>
	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script>
  $(function() {
  	$(".btn-slide").click(function() {
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
    $(function() {
  	$(".btn-slide2").click(function() {
    $("#panel2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
	</script>
	<style>
  #panel {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
    	#panel2 {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide2 {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
	</style>
</head>
<body>
	<a href="" class="btn-slide">Квартира №1<br></a>
<div id="panel">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

	<a href="" class="btn-slide2">Квартира №1<br></a>
<div id="panel2">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 10.03.2013, 20:17
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Гробовщик,
сразу код в топку: а если у тебя на странице будет ну хотя бы 50 квартир?
Ну а по теме: ищи элементы например с классом active и тугли его - всё закроется.
Ответить с цитированием
  #3 (permalink)  
Старый 10.03.2013, 20:24
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Serg_pnz,
Ну я же не хочу всё готовое получить, мне необходимо научиться самому, с кодом я сам потом разберусь, мне бы знать как реализовать, ладно я поищу, если найду выложу решение, если не выложу то я ещё не нашёл
Ответить с цитированием
  #4 (permalink)  
Старый 10.03.2013, 20:48
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Э-мммм... я имел ввиду скриптом ищи.
Т.е. логика такая должна быть: "как только кликнули по ссылке ищем элемент(ы) с классом active и убираем (тугглим) этот класс, далее проявляем форму под ссылкой".
Пример http://jquery.page2page.ru/index.php...81%D1%81%D0%B0
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2013, 02:55
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

Сообщение от Гробовщик Посмотреть сообщение
Есть у меня нехитрый код который открывает выпадающий текст при нажатии на ссылку (2 ссылки и более)... Всё работает всё в порядке, но вот мне надо что бы когда я "открываю" следующий выпадающий текст предыдущий закрывался (что бы открыт был только один), что надо вставить в мой код что бы так было, или хотя бы исходник где такое реализовано, а дальше я определюсь
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="windows-1251">
	<title>Квартира</title>
	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script>
  $(function() {
  	$(".btn-slide").click(function() {
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
    $(function() {
  	$(".btn-slide2").click(function() {
    $("#panel2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  	});
  });
	</script>
	<style>
  #panel {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
    	#panel2 {    
  	display: none;
  	padding: 5px;
  	width: 400px;
  	height: 200px;
  	background: #09F;
  	color: #FFF;
  	}
  .btn-slide2 {
  	background: #CCC;
  	color: #06F;
  	}
  .active {
  	background: #FF9;
  	}
	</style>
</head>
<body>
	<a href="" class="btn-slide">Квартира №1<br></a>
<div id="panel">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

	<a href="" class="btn-slide2">Квартира №1<br></a>
<div id="panel2">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>
</body>
</html>
<a href="" class="btn-slide"  data-section="1">Квартира №1<br></a>
<div id="panel1" class="showhide" style="display:none;">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

	<a href="" class="btn-slide" data-section="2">Квартира №1<br></a>
<div id="panel2" class="showhide" style="display:none;">Выберите действие<br>
<form action="#" method="get" target="_work">
<p id="txt">
<input checked="" type="radio">Аренда (сут.)<br>
<input type="radio"> Аренда (мес.)<br>
<input type="radio"> Продажа<br> <br>
<input value="ок" onclick="#'" type="submit">  
<input value="отмена" onclick="#'" type="button"></p></form></div>

<script>
  $(function() {

    $(".btn-slide").click(function() {
    var data = $(this).data('section');
    $(".showhide").hide();
        $("#panel"+data).slideToggle("slow");
     
    $("a.btn-slide").removeClass("active");
    $(this).toggleClass("active"); return false;
    });
  });
    </script>


Вроде так ))

Последний раз редактировалось Mukhtar, 11.03.2013 в 03:09.
Ответить с цитированием
  #6 (permalink)  
Старый 11.03.2013, 03:09
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

По крайней мере вот тут работает
http://jsfiddle.net/awR4m/

Ну можешь еще поиграть с командой hide(); вместо нее сделай чтоб панель уезжала обратно
Ответить с цитированием
  #7 (permalink)  
Старый 11.03.2013, 06:41
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Mukhtar, действительно всё работает как нельзя лучше, кнопка "отмена" тоже заработала когда получила class="btn-slide"
Ответить с цитированием
  #8 (permalink)  
Старый 11.03.2013, 07:25
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

Сообщение от Гробовщик Посмотреть сообщение
Mukhtar, действительно всё работает как нельзя лучше, кнопка "отмена" тоже заработала когда получила class="btn-slide"
Я так понимаю, это то, что нужно! )))
Ответить с цитированием
  #9 (permalink)  
Старый 11.03.2013, 18:02
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Mukhtar,
Именно так оно и есть) Мне удалось сделать так что из бд для каждой квартиры "вышедшей" из БД есть выпадающий список, теперь всё гораздо легче))))
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2013, 18:06
Профессор
Отправить личное сообщение для Mukhtar Посмотреть профиль Найти все сообщения от Mukhtar
 
Регистрация: 08.10.2010
Сообщений: 201

Отлично.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки кнопки при нажатии и обратно при повторном нажатии mff Общие вопросы Javascript 15 03.05.2018 14:12
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 03:03
Связание наведения на ссылку с jQuery dimaarj jQuery 1 31.01.2011 23:17
Если один уже открыт и при нажатии на ссылку два первый блок скрывался и открывался ybiza Элементы интерфейса 3 16.12.2010 22:24
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18