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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


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


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


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


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


--------------------
Пессимист, это вооружённый знаниями оптимист.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 30.1.2016, 11:22; Ответить: x64
Сообщение #4


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

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

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

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


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


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

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

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

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


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


Цитата(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


Цитата(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


Цитата(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


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


kstnews, тогда врубайте консоль (F12 или Ctrl+Shift+J).
Что там пишет? Ошибка должна быть.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6363 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1352 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
10 Aloof 2542 24.3.2024, 21:45
автор: Liudmila
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
32 2Index 5811 18.3.2024, 16:33
автор: 2Index
Открытая тема (нет новых ответов) Перенос сайта на CMS Wordpress
8 freeax 4844 10.3.2024, 14:58
автор: freeax


 



RSS Текстовая версия Сейчас: 28.3.2024, 19:31
Дизайн