Помощник
|
Выпадающий список на странице сайта, как сделать выпадающий список на странице сайта |
kstnews
|
Сообщение
#1
|
||
|
|
||
|
|||
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 |
|
|
kstnews
|
Сообщение
#3
|
|
Gerga, спасибо за ответ.
Ничего не понимаю в "пиэйчпи, жиквери и яваскриптах", немноооооожечко в "аштимл и сиэсэс", посему возникли глупые вопросы. Технически разницу заметил только в том, что в первых двух вариантах текст скрывается при повторном нажатии... Вопрос: по какому принципу выбирать из данных вариантов? Имеется ввиду - меньшая нагрузка на сервер, меньше код, валидация... PS Например, в моем случае, не получилось в "текст" засунуть ссылку. -------------------- |
|
|
x64 |
30.1.2016, 11:22;
Ответить: x64
Сообщение
#4
|
|
по какому принципу выбирать из данных вариантов? Да по любому. Если jQuery есть, через него кода меньше. меньшая нагрузка на сервер При чём здесь сервер? Всё на клиенте крутится. |
|
|
Gerga |
30.1.2016, 12:41;
Ответить: Gerga
Сообщение
#5
|
|
kstnews, из этих примеров я бы выбрал реализацию на jQuery.
Цитата что в первых двух вариантах текст скрывается при повторном нажатии. в третьем небольшой косяк, подправил https://jsfiddle.net/gxzbm6rw/2/ Сообщение отредактировал Gerga - 30.1.2016, 12:43 |
|
|
kstnews
|
Сообщение
#6
|
|
Если jQuery есть, через него кода меньше. я бы выбрал реализацию на 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 |
31.1.2016, 18:57;
Ответить: x64
Сообщение
#7
|
|
Поддался на уговоры Что Вы, никто ж не уговаривал, было слово «если» (: Код <script type="text/javascript"> jQuery('body').on('click', '.hidetxt', function(){ Скажите, Вы в .js не так пишете? Ну скажите, что не так? В js-файлах должен быть только код, никакого html в чистом виде. Ну и с домом работать уместно по: Код jQuery(document).ready(function(){
// тут код, который должен выполняться после того, как DOM готов }); |
|
|
Alexandr_js |
31.1.2016, 19:08;
Ответить: Alexandr_js
Сообщение
#8
|
|
тоже работает. Если выношу скрипт в файл и прописываю в материале <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 -------------------- |
|
|
kstnews
|
Сообщение
#9
|
|
x64, про "уговорили" типа шутил (запутался в кодах, забыл поставить).
Скажите, Вы в .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; }) С домом понял пока не все (мягко говоря). Буду завтра разбираться. Все дополнительные скрипты в 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> -------------------- |
|
|
x64 |
31.1.2016, 20:36;
Ответить: x64
Сообщение
#10
|
|
kstnews, тогда врубайте консоль (F12 или Ctrl+Shift+J).
Что там пишет? Ошибка должна быть. |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Продвижение молодого сайта | 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 |
Текстовая версия | Сейчас: 28.3.2024, 19:31 |