При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его
подскажите как сделать так чтобы можно была кликнув по ссылке открывалось DIV окно, при клике по тойже ссылке, это окно закрывалось?
да и если возможно так что бы ещё название менялось Открыть/Закрыть, хотя это не обязательно, но если не сложно, было бы не плохо |
Через CSS задайте этому блоку display: none;, а при нажатии на кнопку «Открыть» меняйте это свойство на block. Пробуйте, не получится, выкладывайте код, подскажем, поможем найти ошибку…
|
спасибо что отреагировали на мой вопрос
имеется такой код
<script type="text/javascript">
function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
ссылка для вывода блока при клике
<a href="#" onclick="openbox('box'); return false">Открыть</a>
отображаемый блок <div id="box" style="display: none;">Отображаемый блок</div> всё работает, но хотелось ещё бы чтобы слово "Открыть" менялось автоматически на слово "Закрыть" после нажатия повторно на ссылку |
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'block') {
div.style.display = 'none';
toggler.innerHTML = 'Открыть';
}
else {
div.style.display = 'block';
toggler.innerHTML = 'Закрыть';
}
}
<a id="toggler" href="#">Открыть</a> <div id="box" style="display: none;">Отображаемый блок</div> |
спасибо, работает так как было нужно, но вот одно беспокоит, нельзя бы как то сделать чтобы было всё в одной функции или пусть даже в двух, трёх, главное чтобы часть кода не была открыта, главное чтобы код находился внутри функции. Возможно?
|
Ну если хотите универсальный код, вот, пожалуйста, выглядеть будет примерно так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Togglers</title>
<script type="text/javascript">
// Набор функций
var base = {
// Поиск элементов по классу
findClass: function(str, node) {
if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
else {
var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
for(i = 0; i < length; i++) {
key = true;
for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
if(key) array.push(list[i]);
}
return array;
}
},
// Добавление обработчиков событий
bind: function(node, type, listener) {
if(node.addEventListener) node.addEventListener(type, listener, false);
//@cc_on node.attachEvent('on' + type, function() { listener.call(node); });
},
// Реализация DOMContentLoaded
init: [],
ready: function() {
if(!arguments.callee.done) {
arguments.callee.done = true;
if(this.timer) clearInterval(this.timer);
var i, length = this.init.length;
for(i = 0; i < length; i++) this.init[i]();
this.init = [];
}
},
check: function() {
var _this = this, listener = function() {
_this.ready();
};
if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false);
if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() {
if(/loaded|complete/.test(document.readyState)) base.ready();
}, 10);
/*@cc_on document.write(unescape('%3CSCRIPT onreadystatechange="if(this.readyState==\'complete\') base.ready()" defer=defer src=\/\/:%3E%3C/SCRIPT%3E')); @*/
this.bind(window, 'load', listener);
}
};
// Функции для работы с панельками
var toggler = {
process: function() {
var i, list = base.findClass('toggler'), length = list.length;
for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
list = base.findClass('content');
length = list.length;
for(i = 0; i < length; i++) list[i].style.display = 'none';
},
toggle: function() {
var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
if(content.style.display == 'block') {
content.style.display = 'none';
this.innerHTML = 'Показать';
}
else {
content.style.display = 'block';
this.innerHTML = 'Скрыть';
}
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
};
// Ищем блоки с классом «toggle» по событию DOMContentLoaded
base.init.push(function() {
toggler.process();
});
// Запускаем проверку готовности DOM
base.check();
</script>
<style type="text/css">
.toggle {
width: 200px;
margin: 0 0 14px;
text-align: right;
border: 1px solid #ccc;
}
.toggle .content {
text-align: left;
border: 1px solid #ccc;
background: #eee;
}
.toggle .toggler {
font-size: 11px;
}
</style>
</head>
<body>
<div class="toggle">
<div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div>
<a class="toggler" href="#">Показать</a>
</div>
<div class="toggle">
<div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div>
<a class="toggler" href="#">Показать</a>
</div>
<div class="toggle">
<div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div>
<a class="toggler" href="#">Показать</a>
</div>
</body>
</html>
Здесь таких панелек может быть сколько угодно в коде, не используется ниодного идентифкатора, в XHTML-коде нужно только правильно классы расставить. |
да не, вы немного не так поняли, до этого примера был тот самый что мне нужно было, единственное чтобы хотелось, спрятать этот код
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
};
в функцию, чтобы этот код не был открыто. |
Не совсем понял, что вы хотите. Ну если вынести обработку ссылок в отдельную функцию, то наверное так
function process() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
}
if(window.addEventListener) window.addEventListener('load', process, false);
//@cc_on window.attachEvent('onload', process);
|
мне нужно чтобы всё было в одной функции, вот есть такой код
<style type="text/css">
.closed {display:none;}
.opened {display:block;}
</style>
<script type="text/javascript">
function toggle(imgElem, divId) {
if(document.getElementById) {
var divElem = document.getElementById(divId);
if(divElem.className == "closed") {
imgElem.src = "http://www.prompribor.by/img/menu_opened.gif";
divElem.className = "opened";
imgElem.InnerText = 'Открыть';
document.getElementById("linkname").InnerText = 'Открыть';
} else {
imgElem.src = "http://www.prompribor.by/img/menu_closed.gif";
divElem.className = "closed";
imgElem.InnerText = 'Закрыть';
document.getElementById("linkname").InnerText = 'Закрыть';
}
}
}
</script>
<img src="http://www.prompribor.by/img/menu_closed.gif" onclick="toggle(this,'openbox')">
<a href="#" id="linkname" onclick="toggle(this,'openbox')">Открыть</a>
<div id="openbox" class="closed">text</div>
при клике по по картинке, она меняется в зависимости от статуса "Открыто/Закрыто", а вот ссылка не работает, а должно так, нажал на ссылку в место "Открыть" появилось "Закрыть", и наоборот. Почемуто с картинкой всё нормально а вот с со ссылкой не получается, помогите пожалуйста |
Не
.InnerText а .innerText и в Mozilla FireFox нет innerText, поэтому надо написать .innerHTML |
блин, и в правда, спасибо огромное за оказанную помощь, теперь меня всё устраивает:)
|
Доработать скрипт
Подскажите пожалуйста как довести до ума, чтоб когда кликнул по ссылке то открылся див блок, когда кликаеш по второй ссылке то чтоб первый блок закрывался а второй открывался, и если кликнуть по ссылке, открытого блока чтоб он не закрывался. Ну и по умолчанию первый блок был изначально открытый.
|
Цитата:
|
Цитата:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function divOp(type) { if (type == 1) { document.getElementById('closeBlock').style.display='block';
document.getElementById('blockLink').innerHTML='<a href="#" onclick="divOp(0);">Закрыть</a>';
}
else {document.getElementById('closeBlock').style.display='none';
document.getElementById('blockLink').innerHTML='<a href="#" onclick="divOp(1);">Открыть</a>';
}
}
</script>
</head>
<body>
<div id="blockLink"><a href="#" onclick="divOp(1);">Открыть</a></div>
<div id="closeBlock" style="display:none;">Cодержимое скрытого блока</div>
</body>
</html>
Вот страница с кодом. Работает во всех браузерах. |
Люди помогите!!!
Цитата:
|
Цитата:
Точнее в таком виде работает, но применительно к Битриксу, при использовании в заголовке шаблона слегка модифицированного кода (всего лишь заменив слова показать на картинку). Не отображается вся область #workarea# шаблона |
Цитата:
Спасибо! |
Цитата:
Подскажите, пожалуйста, как можно переделать скрипт, чтобы по нажатию кнопки блок показывался, а при нажатии на крестик "Х" он закрывался? Для такой структуры html кода: <a class="pp-credit-block-button" href="#" id="toggler">Кнопка на открытие блока</a> <div id="popup-credit"><!-- Блок который нужно показать и закрыть по нажатию Х --> <div class="credit_block"> <div class="cancelComment" title="Закрыть">X</div> <h2>Заголовок</h2> <p>Контент</p> <p>Контент</p> <p>Контент</p> </div> </div> Скрипт работает у меня так:
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('popup-credit', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'block') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
toggler.innerHTML = 'Закрыть';
}
}
|
Я уже через CSS извращаюсь, но ничего не выходит:no:
Кто-нить помогите, пожалуйста, разобраться:write:
.description-goods a.pp-credit-block-button:active ~ #popup-credit{display:block !important;}
.description-goods a.pp-credit-block-button:visited ~ #popup-credit{display:block !important;}
.cancelComment:active + #popup-credit{display:none;}
С помощью CSS крестик работает, но блок появляется и сразу же исчезает, только, если кликнув по кнопке не отпускать клавишу мыши перетащить курсор на область блока - он остается видимым, но это извращение. Уже весь мозК сломал... |
Цитата:
|
Есть способ на 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';
}
|
SOS! Не получается вынести скрипт во внешний файл.
Не получается вынести скрипт во внешний файл.
В head скрипт работает корректно. Выношу содержимое между <script type="text/javascript"></script> в файл file.js, загружаю на сервер. Прописываю в head путь: <script src="/file.js"></script> Не работает! путь правильный, файл открывается корректно, другие скрипты выносила также - работают, а этот ни в какую! |
natkalin,
открой консоль браузера и скажи нам ошибки, которые она вывела. |
а как открыть консоль? в моем хроме нет "Инструменты"....
|
Что значит нет? Они должны быть. Попробуй тогда на F12 начать.
|
открыла, но ничего там не поняла (я дизайнер, мое это html)
вот страница: http://allcastle.info/test-news вот скрипт: http://allcastle.info/assets/css/more2.js ps. вносила изменения: class="content" сменила на "skrutuj", но проблема не в этом, проверяла чистый код. Буду бесконечно благодарна за помощь!!! |
Цитата:
открыть скрипт и поменять класс "content" на класс "skrutuj" в строках 50 и 55 и будет вам счастье |
Ура!!!! Заработало!
странно, я ведь для проверки все удалила, и подгружала оригинальный код... |
natkalin,
можно ещё строку 26 слегка подкорректировать
//@cc_on node.attachEvent('on' + type, function() { listener.call(node); });
на
else node.attachEvent('on' + type, function() { listener.call(node); });
если нужна поддержка старого ie |
natkalin,
на странице есть подключение скрипта, который отcутствует по данному url <script language="javascript" type="text/javascript" src="/assets/css/image_zoom.js"></script> Но это так, к сведению. А проблема как раз в этом Цитата:
Цитата:
рони, и вот опять.. |
Рони, спасибо! нужна! добавлю. Готова свою бесконечную благодарность выразить в виде конечной небольшой суммы, если пришлете номер кошелька WM в личку. :victory:
Сафорт, 1) второй скрипт будет присутствовать, кода сверстаю, это для фоток. 2) да, мазила, недоглядела... Всем спасибо! Теперь буду знать, где искать ответы! |
| Часовой пояс GMT +3, время: 11:51. |