Цитата:
|
Есть способ на js, но работает только с jQuery 1.8.2. Можно ли такое на js или в связке с библиотекой jQuery 1.4.2 реализовать, подскажет кто-нить?
<script type="text/javascript"> $(function(){ $("#toggler").on("click", function(){ $("#popup-credit").show(); }) $(".cancelComment").on("click", function(){ $("#popup-credit").hide(); }) }) </script> |
<div><input type="button" value="Открыть" onclick="Hide(this)"> <span style="display:none">Текст</span></div> <script> function Hide(a) { var b = a.parentNode.getElementsByTagName('span')[0].style; if(a.value == 'Открыть') { a.value = 'Закрыть'; b.display = ''; } else { a.value = 'Открыть'; b.display = 'none'; } } </script> |
Deff,
А как такой же фокус можно проделать, если кнопка показа спойлера находится вне основного блока, а сам блок абсолютно позиционирован? Получится, если вместо input'a прописать button и эту кнопку абсолютным позиционированием поставить в нужное место и так же поступить и с основным блоком? Мне нужно, чтобы блок показывался поверх самой кнопки и перекрывал ее. |
Я уже в отчаянии, ни где не могу найти совета ни оффлайн ни онлайн. Все, что пробую сделать - не работает:help:
Повторяюсь: Как заставить работать такую структуру html кода? Нужно, чтобы при клике на ссылку с классом .pp-credit-block-button показывался блок с классом .popup-credit, потом при клике на ссылку с классом .cancelComment блок с классом .popup-credit закрывался. Выше я написал как такое реализуется с jQuery 1.8.2, но с этой версией библиотеки у меня перестает работать плагин prettyPhoto. Вопрос в следующем как это все сделать только на js или как подружить тот код js, который я написал выше с версией библиотеки jQuery 1.4.2? Пожалуйста, помогите... <!-- id нельзя использовать, так как на этой странице будет такая же структура кода, но с другим содержимым --> <a class="pp-credit-block-button" href="#">Кнопка</a> <div class="popup-credit"> <div class="credit_block"> <a class="cancelComment" title="Закрыть">X</a> <h2>Заголовок</h2> <p>Текст</p> <p>Текст</p> <p>Текст</p> <a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a> </div> </div> |
<style> div.popup-credit{ border:red 1px solid; display:none; } a.cancelComment { cursor:pointer; float:right; margin:-12px 12px; } </style> <script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script> <!-- id нельзя использовать, так как на этой странице будет такая же структура кода, но с другим содержимым --> <a class="pp-credit-block-button" href="#" onclick="return false">В рассрочку</a> <div class="popup-credit"> <div class="credit_block"> <a class="cancelComment" title="Закрыть">X</a> <h2>Заголовок</h2> <p>Текст</p> <p>Текст</p> <p>Текст</p> <a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a> </div> </div> <script> $(".pp-credit-block-button").click( function(){ $(this).next(".popup-credit").toggle("fast") }); $(".cancelComment").click( function(){ $(this).parents(".popup-credit:first").hide("fast") }); </script> |
Deff,
Вы Человек с большой буквы "Ч", СПАСИБО большое!!! Скрипт просто супер, все работает как я и хотел! |
Подскажите,
есть скрипт, вывода и скрытия текста при клике на пункты. как нужно его переделать, что бы при заходе на страницу или обновлении страницы 1 пункт был открыт, а далее работало все так же? скрипт <script type="text/javascript"> var folder = null; function expandit( curobj ) { if( !!folder ) folder.display = 'none'; folder= document.all ? document.all[curobj.sourceIndex+1].style : curobj.nextSibling.nextSibling.style; folder.display = (folder.display==='none') ? '' : 'none'; return false; } </script> <p style="cursor:hand" onClick="expandit(this)" align="right"><strong>3 пункт</strong></p> <span style="display:none" style=&{head};> открылся текст </span> <p style="cursor:hand" onClick="expandit(this)" align="right"><strong>2 пункт</strong></p> <span style="display:none" style=&{head};> открылся текст </span> <p style="cursor:hand" onClick="expandit(this)" align="right"><strong>1 пункт</strong></p> <span style="display:none" style=&{head};> открылся текст </span> |
Здравствуйте ув. форумчане!
Помогите, пожалуйста. Делаю адаптивное меню и столкнулась с интересной проблемой. Вот код, который открывает и закрывает меню: function openbox(id){ if(document.getElementById(id).style.display=='none'){ document.getElementById(id).style.display='block'; }else{ document.getElementById(id).style.display='none'; } } Для большого экрана div с меню отображается стандартно. Для маленького экрана меню "свернуто в кнопку" через медиа-запрос - #menu {display:none;} Но скрипт приведенный выше не видит этот медиа-запрос и считает, что меню в данный момент отображено. Так как в основных стилях "none" не задано, а только в медиа-запросе. Это приводит к тому, что меню раскрывается только по второму клику первый раз. В дальнейшем работает нормально. По клику сворачивается, по клику разворачивается. Что делать? |
Цитата:
Например, так: function openbox(id) { var el = document.getElementById(id); var display = getComputedStyle(el).display; el.style.display = display === 'none' ? 'block' : 'none'; } |
Часовой пояс GMT +3, время: 11:50. |