Цитата:
|
Есть способ на 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, время: 15:23. |