Форум

moslem · #1 (**permalink**) 13.04.2014, 22:13

Приветствую. Нашел готовый код на просторах интернета, для выпадающего списка при клике на меню, мне нужно было реализовать это для нескольких блоков сразу, которые имеют схожие классы везде. То есть JQuery должен сам понимать какой ему блок именно открыть.

Допустим мы имеем следующую структуру:

<div class="sf-field">
		<span class="stfilters">07.04.2014 - 13.04.2014</span>
		<div class="info-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, modi, deserunt, beatae perferendis perspiciatis ex quis tenetur fuga officiis iure vero eum sint minima soluta quod saepe expedita aspernatur. Aspernatur, recusandae, iusto, qui excepturi consectetur hic quos voluptatum ex quo voluptate libero asperiores reiciendis dolore nemo provident iste praesentium dolorum officiis eos mollitia natus cupiditate quasi perspiciatis! Quibusdam, perferendis, reprehenderit, ducimus consequuntur quia excepturi eos magnam in voluptatum minus maiores nemo sit laborum doloribus tempore quos non assumenda voluptate necessitatibus molestias labore officia facilis quidem officiis quisquam iure enim quaerat ipsum sequi earum? Odit, rerum est earum suscipit atque molestias.</div>
	</div>
	<div class="sf-field">
		<span class="stfilters">Площадки</span>
		<div class="info-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, modi, deserunt, beatae perferendis perspiciatis ex quis tenetur fuga officiis iure vero eum sint minima soluta quod saepe expedita aspernatur. Aspernatur, recusandae, iusto, qui excepturi consectetur hic quos voluptatum ex quo voluptate libero asperiores reiciendis dolore nemo provident iste praesentium dolorum officiis eos mollitia natus cupiditate quasi perspiciatis! Quibusdam, perferendis, reprehenderit, ducimus consequuntur quia excepturi eos magnam in voluptatum minus maiores nemo sit laborum doloribus tempore quos non assumenda voluptate necessitatibus molestias labore officia facilis quidem officiis quisquam iure enim quaerat ipsum sequi earum? Odit, rerum est earum suscipit atque molestias.</div>
	</div>
	<div class="sf-field">Программы</div>
	<div class="sf-field">SubID</div>

Если я нажму на первую кнопку <span class="stfilters">07.04.2014 - 13.04.2014</span> то она соответственно должна открыть блок находящийся под ней.

Что то подобное у меня получилось, только открываются 2 блока сразу.

Знаний у меня совсем нет, пытаюсь что-то учить, но сейчас нужна была помощь срочная.

Вот демка: http://moslem.ws/dm/loa/nstatic.html

Если есть готовый плагин, был бы рад если скинули бы линк.

рони · #2 (**permalink**) 13.04.2014, 23:19

moslem,
на форуме много ...очень много подобных примеров ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.stfilters + .info-bubble {
  display: none;
}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(function () {
       $(".stfilters").on("click", function (event) {
           $info = $("+ .info-bubble", this);
           $(".stfilters + .info-bubble").not($info).slideUp(500);
           $info.slideToggle(800);
       });
       $(document).on("click", function (event) {
           if ($(".sf-field").has(event.target).length === 0) $(".stfilters + .info-bubble").slideUp(500);
       });
   })
  </script>
</head>

<body>
 <div class="sf-field">
		<span class="stfilters">07.04.2014 - 13.04.2014</span>
		<div class="info-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, modi, deserunt, beatae perferendis perspiciatis ex quis tenetur fuga officiis iure vero eum sint minima soluta quod saepe expedita aspernatur. Aspernatur, recusandae, iusto, qui excepturi consectetur hic quos voluptatum ex quo voluptate libero asperiores reiciendis dolore nemo provident iste praesentium dolorum officiis eos mollitia natus cupiditate quasi perspiciatis! Quibusdam, perferendis, reprehenderit, ducimus consequuntur quia excepturi eos magnam in voluptatum minus maiores nemo sit laborum doloribus tempore quos non assumenda voluptate necessitatibus molestias labore officia facilis quidem officiis quisquam iure enim quaerat ipsum sequi earum? Odit, rerum est earum suscipit atque molestias.</div>
	</div>
	<div class="sf-field">
		<span class="stfilters">Площадки</span>
		<div class="info-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, modi, deserunt, beatae perferendis perspiciatis ex quis tenetur fuga officiis iure vero eum sint minima soluta quod saepe expedita aspernatur. Aspernatur, recusandae, iusto, qui excepturi consectetur hic quos voluptatum ex quo voluptate libero asperiores reiciendis dolore nemo provident iste praesentium dolorum officiis eos mollitia natus cupiditate quasi perspiciatis! Quibusdam, perferendis, reprehenderit, ducimus consequuntur quia excepturi eos magnam in voluptatum minus maiores nemo sit laborum doloribus tempore quos non assumenda voluptate necessitatibus molestias labore officia facilis quidem officiis quisquam iure enim quaerat ipsum sequi earum? Odit, rerum est earum suscipit atque molestias.</div>
	</div>
	<div class="sf-field">Программы</div>
	<div class="sf-field">SubID</div>
 </body>
 </html>

moslem · #3 (**permalink**) 14.04.2014, 01:19

Рони, спасибо за помощь :-), то что надо.

А как сделать если пользователь кликнет по любой области сайта чтоб закрывалось всплывающее окно?

рони · #4 (**permalink**) 14.04.2014, 01:34

Сообщение от moslem

А как сделать если пользователь кликнет по любой области сайта чтоб закрывалось всплывающее окно?

Сообщение от рони

на форуме много ...очень много подобных примеров ...

смотрите код выше ... добавлено тама

moslem · #5 (**permalink**) 14.04.2014, 16:28

спасибо Рони)

Форум

Справочник

Discord чат

Курсы javascript