X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Выпадающий список на странице сайта, как сделать выпадающий список на странице сайта
kstnews
kstnews
Topic Starter сообщение 29.1.2016, 16:16; Ответить: kstnews
Сообщение #1


Ну желаю, чтобы все...
*****

Группа: Active User
Сообщений: 571
Регистрация: 25.11.2011
Из: Нижегородская губерния
Поблагодарили: 176 раз
Репутация:   35  


Применяю на страницах сайта следующий способ получения "впадающего списка":
Развернуть/Свернуть
Код
<script>
var show;
function hidetxt(type){
param=document.getElementById(type);
if(param.style.display == "none") {
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
}else param.style.display = "none"
}
</script>


Код
<div>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow">Заголовок ссылки 1</a>
<div style="display:none;" id="div1">
Текст ссылки 1
</div>
</div>
<div>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow">Заголовок ссылки 2</a>
<div style="display:none;" id="div2">
Текст ссылки 1
</div>
</div>


Таких списков на странице десятки. Какие могут быть другие варианты?

PS Заранее спасибо.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 29.1.2016, 19:13; Ответить: Gerga
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 265
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 180 раз
Репутация:   47  


kstnews, если делать все на чистом JS, вариант 1:

Развернуть/Свернуть
Код
<div>
    <a class="hidetxt" href="#" rel="nofollow">Заголовок ссылки 1</a>
    <div style="display:none;" id="div1">
        Текст ссылки 1
    </div>
</div>
<div>
    <a class="hidetxt" href="#" rel="nofollow">Заголовок ссылки 2</a>
    <div style="display:none;" id="div2">
       Текст ссылки 1
    </div>
</div>

Код
var hidetxt = document.getElementsByClassName('hidetxt'),
    j = hidetxt.length,
    show = false;
for (var i = 0; i < j; i++) {
    hidetxt[i].addEventListener('click', f_hidetxt, false);
}
function f_hidetxt() {
    var next = this.nextSibling;
    while ( next.nodeType > 1 ) next = next.nextSibling;
    if ( next.style.display == "none" ) {
        if ( show ) show.style.display = "none";
      next.style.display = "block";
      show = next;
    } else {
      next.style.display = "none";
    }
}

https://jsfiddle.net/mnk9e35u/
вариант 2:
Развернуть/Свернуть
Код
<div>
    <a class="hidetxt" href="#" data-param="div1" rel="nofollow">Заголовок ссылки 1</a>
    <div style="display:none;" id="div1">
        Текст ссылки 1
    </div>
</div>
<div>
    <a class="hidetxt" href="#" data-param="div2" rel="nofollow">Заголовок ссылки 2</a>
    <div style="display:none;" id="div2">
    Т   екст ссылки 1
    </div>
</div>

Код
var hidetxt = document.getElementsByClassName('hidetxt'),
    j = hidetxt.length,
    show = false;
for (var i = 0; i < j; i++) {
    hidetxt[i].addEventListener('click', f_hidetxt, false);
}
function f_hidetxt() {
    var param = this.getAttribute('data-param');    
    param = document.getElementById(param);
    if ( param === null ) return false;
    if ( param.style.display == "none" ) {
        if ( show ) show.style.display = "none";
      param.style.display = "block";
      show = param;
    } else {
      param.style.display = "none";
    }
}

https://jsfiddle.net/dtw8bg61/1/

вариант 3 на jQuery:
Развернуть/Свернуть
Код
<div>
    <a class="hidetxt" href="#" data-param="div1" rel="nofollow">Заголовок ссылки 1</a>
    <div style="display:none;" id="div1">
        Текст ссылки 1
    </div>
</div>
<div>
    <a class="hidetxt" href="#" data-param="div2" rel="nofollow">Заголовок ссылки 2</a>
    <div style="display:none;" id="div2">
    Т   екст ссылки 1
    </div>
</div>
<div>
    <a class="hidetxt" href="#" data-param="div2" rel="nofollow">Заголовок ссылки 2</a>
    <div style="display:none;" id="div2">
    Т   екст ссылки 1
    </div>
</div>

Код
jQuery('body').on('click', '.hidetxt', function(){
    var $this = jQuery(this),
  $next = $this.next();
  jQuery('.activeList').fadeOut(0).removeClass('activeList');
  $next.toggle(100).toggleClass('activeList')
})

https://jsfiddle.net/gxzbm6rw/

Сообщение отредактировал Gerga - 29.1.2016, 19:25


--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kstnews
kstnews
Topic Starter сообщение 30.1.2016, 9:56; Ответить: kstnews
Сообщение #3


Ну желаю, чтобы все...
*****

Группа: Active User
Сообщений: 571
Регистрация: 25.11.2011
Из: Нижегородская губерния
Поблагодарили: 176 раз
Репутация:   35  


Gerga, спасибо за ответ.
Ничего не понимаю в "пиэйчпи, жиквери и яваскриптах", немноооооожечко в "аштимл и сиэсэс", посему возникли глупые вопросы.
Технически разницу заметил только в том, что в первых двух вариантах текст скрывается при повторном нажатии...
Вопрос: по какому принципу выбирать из данных вариантов? Имеется ввиду - меньшая нагрузка на сервер, меньше код, валидация...
PS Например, в моем случае, не получилось в "текст" засунуть ссылку.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 30.1.2016, 11:22; Ответить: x64
Сообщение #4


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


Цитата(kstnews @ 30.1.2016, 8:56) *
по какому принципу выбирать из данных вариантов?

Да по любому. Если jQuery есть, через него кода меньше.

Цитата(kstnews @ 30.1.2016, 8:56) *
меньшая нагрузка на сервер

При чём здесь сервер? Всё на клиенте крутится.


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gerga
Gerga
сообщение 30.1.2016, 12:41; Ответить: Gerga
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 265
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 180 раз
Репутация:   47  


kstnews, из этих примеров я бы выбрал реализацию на jQuery.

Цитата
что в первых двух вариантах текст скрывается при повторном нажатии.

в третьем небольшой косяк, подправил https://jsfiddle.net/gxzbm6rw/2/

Сообщение отредактировал Gerga - 30.1.2016, 12:43


--------------------
Разработка на WordPress -> Верстка/Натяжка/Добавление функционала в шаблонах на WP


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kstnews
kstnews
Topic Starter сообщение 31.1.2016, 18:34; Ответить: kstnews
Сообщение #6


Ну желаю, чтобы все...
*****

Группа: Active User
Сообщений: 571
Регистрация: 25.11.2011
Из: Нижегородская губерния
Поблагодарили: 176 раз
Репутация:   35  


Цитата(x64 @ 30.1.2016, 10:22) *
Если jQuery есть, через него кода меньше.

Цитата(Gerga @ 30.1.2016, 11:41) *
я бы выбрал реализацию на jQuery.

Поддался на уговоры и выбрал jQuery.

jQuery не было, библиотеку подключил к joomla 1.5 прописыванием в шаблоне <head></head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
Тут, насколько я понял, вариантов несколько. Качать с офф. сайта, класть себе на сервер, и прописывать загрузку со своего сервера. Или, как советуют, с google.
Версию 2 выбрал потому, что, насколько я понял, побыстрее, правда старые браузеры не поддерживаются.

Дальше, если прописываю в материале
Развернуть/Свернуть
Код
<script type="text/javascript">
jQuery('body').on('click', '.hidetxt', function(){
    var $next = jQuery(this).next(),
          $activeList = jQuery('.activeList');  
  $activeList.fadeOut(0);
  if ( !$next.hasClass('activeList') )  {
      $next.fadeIn(100).addClass('activeList')
  }
  $activeList.removeClass('activeList');
  return false;    
})
</script>[/spoiler]
<div>
    <a class="hidetxt" href="#" rel="nofollow">Заголовок ссылки 1</a>
    <div style="display:none;" id="div1">
        Текст ссылки 1
    </div>
</div>
<div>
    <a class="hidetxt" href="#" rel="nofollow">Заголовок ссылки 2</a>
    <div style="display:none;" id="div2">
    Текст ссылки 2
    </div>
</div>
<div>
    <a class="hidetxt" href="#" rel="nofollow">Заголовок ссылки 3</a>
    <div style="display:none;" id="div2">
        Текст <a href="#">ссылки 1</a>
    </div>
</div>

списки работают.
Оставляю в материале только div, в скрипт пишу в <head></head> в виде
Развернуть/Свернуть
Код
<script type="text/javascript">
jQuery('body').on('click', '.hidetxt', function(){
    var $next = jQuery(this).next(),
          $activeList = jQuery('.activeList');  
  $activeList.fadeOut(0);
  if ( !$next.hasClass('activeList') )  {
      $next.fadeIn(100).addClass('activeList')
  }
  $activeList.removeClass('activeList');
  return false;    
})
</script>

тоже работает.
Если выношу скрипт в файл и прописываю в материале
<script type="text/javascript" src="/js/jquery.list.js"></script> - работает.
Переношу <script type="text/javascript" src="/js/jquery.list.js"></script> в <head> - не работает.

Что я делаю не так?
Где лучше прописывать скрипт - в шаблоне или на странице (учитывая, что на одном сайте страниц со списком будем максимум 5, в другом практически на каждой странице).

PS Sorry, с терминами мог чего напутать.

Сообщение отредактировал kstnews - 31.1.2016, 18:46
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 31.1.2016, 18:57; Ответить: x64
Сообщение #7


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


Цитата(kstnews @ 31.1.2016, 17:34) *
Поддался на уговоры

Что Вы, никто ж не уговаривал, было слово «если» (:

Код
<script type="text/javascript">
jQuery('body').on('click', '.hidetxt', function(){

Скажите, Вы в .js не так пишете? Ну скажите, что не так?
В js-файлах должен быть только код, никакого html в чистом виде.
Ну и с домом работать уместно по:
Код
jQuery(document).ready(function(){
  // тут код, который должен выполняться после того, как DOM готов
});


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexandr_js
Alexandr_js
сообщение 31.1.2016, 19:08; Ответить: Alexandr_js
Сообщение #8


Участник
***

Группа: User
Сообщений: 241
Регистрация: 21.7.2015
Поблагодарили: 44 раза
Репутация:   8  


Цитата(kstnews @ 31.1.2016, 18:34) *
тоже работает.
Если выношу скрипт в файл и прописываю в материале
<script type="text/javascript" src="/js/jquery.list.js"></script> - работает.
Переношу <script type="text/javascript" src="/js/jquery.list.js"></script> в <head> - не работает.

Что я делаю не так?
Где лучше прописывать скрипт - в шаблоне или на странице (учитывая, что на одном сайте страниц со списком будем максимум 5, в другом практически на каждой странице).

PS Sorry, с терминами мог чего напутать.


Все дополнительные скрипты в head после библиотеки Jquery

В материале работает потому, что jquery идет выше чем скрипт.

Сообщение отредактировал Alexandr_js - 31.1.2016, 19:09


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kstnews
kstnews
Topic Starter сообщение 31.1.2016, 20:02; Ответить: kstnews
Сообщение #9


Ну желаю, чтобы все...
*****

Группа: Active User
Сообщений: 571
Регистрация: 25.11.2011
Из: Нижегородская губерния
Поблагодарили: 176 раз
Репутация:   35  


x64, про "уговорили" типа шутил (запутался в кодах, забыл :) поставить).
Цитата(x64 @ 31.1.2016, 17:57) *
Скажите, Вы в .js не так пишете? Ну скажите, что не так?

Не так.
Развернуть/Свернуть
Код
jQuery('body').on('click', '.hidetxt', function(){
    var $next = jQuery(this).next(),
          $activeList = jQuery('.activeList');  
  $activeList.fadeOut(0);
  if ( !$next.hasClass('activeList') )  {
      $next.fadeIn(100).addClass('activeList')
  }
  $activeList.removeClass('activeList');
  return false;    
})

С домом понял пока не все (мягко говоря). Буду завтра разбираться.

Цитата(Alexandr_js @ 31.1.2016, 18:08) *
Все дополнительные скрипты в head после библиотеки Jquery

Да вроде так и прописывал:
Развернуть/Свернуть
Код
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.list.js"></script>


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 31.1.2016, 20:36; Ответить: x64
Сообщение #10


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


kstnews, тогда врубайте консоль (F12 или Ctrl+Shift+J).
Что там пишет? Ошибка должна быть.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыWebMoney попали в список санкций СНБО (Украина)
52 Alekser 1493 Сегодня, 14:25
автор: phoenix_kys
Открытая тема (нет новых ответов) Продвижение сайта в ТОП выдачи с оплатой за позиции
6 Barselona 421 Вчера, 10:48
автор: Barselona
Горячая тема (нет новых ответов) Качественный копирайт и наполнение Вашего сайта
Подходи, торопись, покупай живо...
251 DroBit 93928 Вчера, 7:28
автор: DroBit
Открытая тема (нет новых ответов) Ваши первые действия после создания сайта
представьте что вы создали новый сайт
10 HavingingWorld 436 23.5.2018, 0:05
автор: JOHNY
Открытая тема (нет новых ответов) Ссылки с сайта по ремонту квартир
Только Москва
1 serb000 878 22.5.2018, 14:48
автор: Olopopscalius


 



RSS Текстовая версия Сейчас: 25.5.2018, 14:27
Дизайн