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



 

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

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


Бывалый
****

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


Применяю на страницах сайта следующий способ получения "впадающего списка":
Развернуть/Свернуть
Код
<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
Сообщений: 247
Регистрация: 15.2.2013
Из: Одесса
Поблагодарили: 168 раз
Репутация:   43  


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


Бывалый
****

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


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


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

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


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

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

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

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


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


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


Участник
***

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


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


Бывалый
****

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


Цитата(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
Сообщений: 3424
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2744 раза
Репутация:   289  


Цитата(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
Сообщений: 237
Регистрация: 21.7.2015
Поблагодарили: 43 раза
Репутация:   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


Бывалый
****

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


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
Сообщений: 3424
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2744 раза
Репутация:   289  


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Чем сжимать картинки для сайта без потери качества
1st-finstep.ru - Заработок в сети и методы продвижения сайта
8 komarik_vlad 939 Вчера, 23:24
автор: komarik_vlad
Открытая тема (нет новых ответов) Увеличение посещаемости сайта (яндекс, гугл, соц сети) - реальные люди
15 SANR 970 Вчера, 22:26
автор: anchous
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыпрошу оценить юзабилити сайта
17 ДаниилЯ 1893 Вчера, 20:33
автор: alexandrrr
Открытая тема (нет новых ответов) Требуются рерайтеры для медицинского сайта
30 руб за 1000 рерайта
14 Lisel85 2715 Вчера, 19:38
автор: Lisel85
Открытая тема (нет новых ответов) GALAKSION – оптимальный вариант для монетизации вашего сайта!
23 Galaksion_Network 2434 Вчера, 19:17
автор: Galaksion_Network


 



RSS Текстовая версия Сейчас: 13.12.2017, 7:55
Дизайн