Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2012, 12:00
Аватар для Wolk_
Интересующийся
Отправить личное сообщение для Wolk_ Посмотреть профиль Найти все сообщения от Wolk_
 
Регистрация: 01.04.2012
Сообщений: 13

Выпадающий список по onClick
Добрый день, дайте пожалуйста решение, а точнее простую реализацию следующей функции:

- Имеется блок по клику на который открывается вложенный список;
- Закрыть список можно повторным кликом или кликом в любую область сайта.


Для наглядности:

Ответить с цитированием
  #2 (permalink)  
Старый 14.04.2012, 23:03
Аватар для Wolk_
Интересующийся
Отправить личное сообщение для Wolk_ Посмотреть профиль Найти все сообщения от Wolk_
 
Регистрация: 01.04.2012
Сообщений: 13

По-моему код явно незаконченный. Ведь список по умолчанию должен быть скрыт, а при клике становиться видимым. В JS я совсем не разбираюсь, так что тема не раскрыта.
Ответить с цитированием
  #3 (permalink)  
Старый 14.04.2012, 23:07
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Готовых реализаций много, use google. Если хотите реализацию, адаптированную конкретно под ваши нужды - вам в раздел "Работа".
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #4 (permalink)  
Старый 15.04.2012, 09:47
Аватар для Wolk_
Интересующийся
Отправить личное сообщение для Wolk_ Посмотреть профиль Найти все сообщения от Wolk_
 
Регистрация: 01.04.2012
Сообщений: 13

За меня не нужно выполнять мою работу Мне нужно знать ориентировочное расположение списка в блоке и надо ли ему прописывать dispaly:none.

Ведь у меня будет такого рода конструкция (ниже), а значит список по умолчанию должен не отображаться, по клику на заголовок с классом "button" делать список видимым. Также при выборе элемента списка, сам список должен сворачиваться, также список сворачивается и по клику в любой участок страницы (при условии, что список при этом открыт)

<div class="profile">
                	<a href="#" class="button">
                    	<span class="profile_name">Сергей</span>
                        <span class="profile_arrow"></span>
                    </a>
                    <div class="profile_menu">
                    <ul>
                        <li><a href="#">Edit Profile</a></li>
                        <li><a href="#">Account Settings</a></li>
                        <li><a href="#">Appear Offline</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </div>

Последний раз редактировалось Wolk_, 15.04.2012 в 10:59.
Ответить с цитированием
  #5 (permalink)  
Старый 16.04.2012, 09:35
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от Wolk_
и надо ли ему прописывать dispaly:none.
Часто используют именно такой способ скрытия, если его используете, значит, надо.

Основная проблема, как я понимаю, в скрытии подменю, по щелчку вне самого подменю (по кликам по самим пунктам меню вроде бы проблем не возникает).

Один из вариантов использовать событие onblur (некроссбраузерно).

Другой вариант: задать обработчик клика на самом body и отфильтровать лишние события (так как неотключённое всплытие событий для любого клика будет приводить к вызову этого обработчика).

Возможно есть и другие варианты.
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2012, 14:43
Аватар для Wolk_
Интересующийся
Отправить личное сообщение для Wolk_ Посмотреть профиль Найти все сообщения от Wolk_
 
Регистрация: 01.04.2012
Сообщений: 13

Не сочтите за наглость, но мне бы конкретный код, так как с js я вообще не знаком, нужно на всем сайте его только раз применить.

Что требуется:

+ При клике на ссылку открывается скрытый блок/список;
+ При выборе элемента списка - блок/список скрывается;
+ Также закрытие происходит при клике на ссылку вызывающую блок/список и при клике на любой участок страницы.
Ответить с цитированием
  #7 (permalink)  
Старый 16.04.2012, 15:38
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Wolk_
За меня не нужно выполнять мою работу
Сообщение от Wolk_
Не сочтите за наглость, но мне бы конкретный код

Сообщение от trikadin
Если хотите реализацию, адаптированную конкретно под ваши нужды - вам в раздел "Работа".
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #8 (permalink)  
Старый 16.04.2012, 15:54
Профессор
Отправить личное сообщение для sergiocharm Посмотреть профиль Найти все сообщения от sergiocharm
 
Регистрация: 12.08.2011
Сообщений: 176

Вот у меня здесь http://www.allremont59.ru/ чуть ниже логотипа есть слово "Метка" кликните по нему, если вам нужно что то типа такого то вам вот этот код:
<script>
function look(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>
<h3><a href="javascript:look('div2');"><span>Метки</span></a></h3>
<div id="div2" style="display:none" class="tegs">
               <?php wp_tag_cloud(); ?>
</div>
Ответить с цитированием
  #9 (permalink)  
Старый 16.04.2012, 16:12
Аватар для Wolk_
Интересующийся
Отправить личное сообщение для Wolk_ Посмотреть профиль Найти все сообщения от Wolk_
 
Регистрация: 01.04.2012
Сообщений: 13

Сообщение от sergiocharm Посмотреть сообщение
Вот у меня здесь http://www.allremont59.ru/ чуть ниже логотипа есть слово "Метка" кликните по нему, если вам нужно что то типа такого то вам вот этот код:
<script>
function look(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>
<h3><a href="javascript:look('div2');"><span>Метки</span></a></h3>
<div id="div2" style="display:none" class="tegs">
               <?php wp_tag_cloud(); ?>
</div>
Благодарю,тему можно закрывать
Ответить с цитированием
  #10 (permalink)  
Старый 17.04.2012, 09:06
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от Wolk_
так как с js я вообще не знаком
В чём проблема познакомиться?

Сообщение от Wolk_
нужно на всем сайте его только раз применить.
Ваши сайты вообще обходятся без js?

Сообщение от Wolk_
Благодарю,тему можно закрывать
Вы сами-то кликали по слову "Метка" на указанном сайте?
Это лишь часть решения и не проходит по вашему же пункту:

Сообщение от Wolk_
Также закрытие происходит ....... и при клике на любой участок страницы.

Последний раз редактировалось bes, 17.04.2012 в 09:13.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 15:20
Как правильно скопировать выпадающий список <select ... diiimonn Элементы интерфейса 1 13.06.2011 09:23
Выпадающий список не помещается в div'е LA_ Элементы интерфейса 5 01.11.2010 10:43
Выпадающий список с возможностью ввода текста LA_ Элементы интерфейса 6 27.10.2010 16:30
Помогите вставить в форму не только чекбоксы но и выпадающий список seva_81 Серверные языки и технологии 3 20.09.2010 10:02