Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   простой show/hide для контента (https://javascript.ru/forum/dom-window/1550-prostojj-show-hide-dlya-kontenta.html)

M.C. 12.08.2008 16:02
простой show/hide для контента
 
Всем привет! ;)
Вот тут у Гугла сделано так - есть ссылки и есть скрытый конетнт под ними, при нажатии на ссылку этот контент открывается, при нажатии на ссылку ниже верхний скрывается, а нижний открывается и так далее...

Хотелось бы сделать что-то подобное, посмотрел скрипт Гугла - там вроде все просто, но хотелось бы еще проще, так как мне не нужно лишнего.

Вот код гугла

function initTrainingVids() {
  var vidLinks = [];
  var allLinks = document.getElementsByTagName('a');
  
  for(var i = 0, tag; tag = allLinks[i]; i++) {
    if(tag.className == 'vid') {
      vidLinks[vidLinks.length] = tag;
    }
  }

  for(var i = 0, vid; vid = vidLinks[i]; i++) {
    // Get YouTube video ID
    var vidId = vid.href.slice(vid.href.indexOf('=')+1);
    // Find object to add video to
    var vidTarget = vid.parentNode.parentNode.getElementsByTagName('div');
    vidTarget = vidTarget[vidTarget.length - 1];
    /**
    while(vidTarget.nodeName.toLowerCase() != 'div' && vidTarget.className != 'vid') {
      vidTarget = vidTarget.nextSibling;
    }
      **/
    // Attach onclick event
    vid.onclick = function(target, src) {
                    return function() {
                      if(target.style.display != 'block') {
                        var vidTag = '<iframe src="http://www.youtube.com/v/'+src+'"></iframe>';
                        target.innerHTML = vidTag;
                        var allDivs = document.getElementsByTagName('div')
                        for(var i = 0, div; div = allDivs[i]; i++) {
                          if(div.className == 'vid' && div.style.display == 'block') {
                            div.style.display = 'none';
                          }
                        }
                        target.style.display = 'block';
                      } else {
                        target.innerHTML = '';
                        target.style.display = 'none';
                      }
                      return false;
                    };
                  }(vidTarget, vidId);
  }

}


пытался самостоятельно изменить его, но так ничего и не получилось (с програмиированием у меня не очень хорошо) :(

мне нужно просто что-то типа этого:

<a href="#" onclick="show (div1)">LINK1</a>
<div id=div1>
СОДЕРЖАНИЕ1
<div>

<a href="#" onclick="show (div2)">LINK2</a>
<div id=div2>
СОДЕРЖАНИЕ2
<div>

<a href="#" onclick="show (div3)">LINK3</a>
<div id=div3>
СОДЕРЖАНИЕ3
<div>


при этом, когда жму на ЛИНК1 то открывается СОДЕРЖАНИЕ1, когда жму на ЛИНК2 открывается СОДЕРЖАНИЕ2, а СОДЕРЖАНИЕ1 закрывается и т.д.

Нашел также скрипты, которые просто открывают/закрывают свой слой, но чтобы открывали свой, а закрывали чужие - не нашел....

Заранее спасибо!

Андрей Параничев 12.08.2008 16:32
M.C.,
Можете попробовать вот такой вариант. Он может показаться не самым простым, для человека незнакомым с javascript, но я смог быстро придумать только это:
<html>
<head>
	<script>
		// Обворачиваем функцию toggle в локальное замыкание:
		var toggle = function() {
			// Ссылка на текущий открытый div:
			var currentDiv = null;
			
			// Функция для "раскрытия" элемента:
			function open(divElement) {
				// Тут можно добавить эффект "плавного" открытия:
				divElement.style.display = "block";
				currentDiv = divElement;
			}
			
			// Функция для "закрытия" элемента:
			function close(divElement) {
				// Тут можно добавить эффект "плавного" закрытия:
				divElement.style.display = "none";
				currentDiv = null;
			}
			
			// Возвращаем функцию, которая будет вызываться по toggle()
			return function(divID) {
				// Получаем элемент из DOM
				var divElement = document.getElementById(divID);
				// Если такой есть:
				if (divElement) {
					// Если уже открыт какой-то div - закрываем.
					if(currentDiv != null) close(currentDiv);
					// Открываем вызваный.
					open(divElement);
				}
			}
		// Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
		}();
	</script>
	<style>
		.myDiv {
			display: none;
		}
	</style>
</head>
<body>
	<a href="javascript://" onClick="toggle('div1')">Link1</a>
	<div class="myDiv" id="div1">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
	
	<a href="javascript://" onClick="toggle('div2')">Link2</a>
	<div class="myDiv" id="div2">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
	
	<a href="javascript://" onClick="toggle('div3')">Link3</a>
	<div class="myDiv" id="div3">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
</body>
</html>

M.C. 12.08.2008 17:03
Андрей Параничев,
огромное вам человеческое СПАСИБО! все работает отлично! буду разбирать ваш код для дальнейшего обучения! ;)

Удачи!

M.C. 12.08.2008 19:39
уважаемый, а как бы еще добавить, чтобы при нажатии на туже ссылку, если ее слой открыт он бы закрывался?

Андрей Параничев 12.08.2008 21:54
M.C.,
Замените функцию, возвращаемую по return на такую:
// Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
					if (divElement === currentDiv) {
						close(currentDiv);
					// Если открыт другой div, то закрываем и открываем текущий:
					} else if(currentDiv != null) {
						close(currentDiv);
						open(divElement);
					// Иначе - просто открываем:
					} else {
						open(divElement);
					}
                }
            }

M.C. 13.08.2008 11:38
и еще раз огромное СПАСИБО! ;)

and50 13.08.2008 14:56
а подскажите пожалуйста как сделать так, чтобы по нажатию на ссылку (Link[i]) сама ссылка скрывалась, а открывалось содержание соответствующего ей тега div ?

Андрей Параничев 13.08.2008 15:20
and50,
Запоминать её, точно так же как div, при открытии - скрывать, при закрытии - показывать. Что-то на подобии этого:
<html>
<head>
    <script>
        // Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
			// Текущая ссылка:
			var currentAnchor = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, linkElement) {
				// Запоминаем и прячем ссылку:
				currentAnchor = linkElement;
				currentAnchor.style.display = "none";
				
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
				// Показываем ссылку и "забываем":
				currentAnchor.style.display = "inline";
				currentAnchor = null;
			
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, link) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт какой-то div - закрываем.
                    if(currentDiv != null) close(currentDiv);
                    // Открываем вызваный.
                    open(divElement, link);
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();
    </script>
    <style>
        .myDiv {
            display: none;
        }
    </style>
</head>
<body>
    <a href="javascript://" onClick="toggle('div1', this)">Link1</a>
    <div class="myDiv" id="div1">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
    </div>
    <br />
 
    <a href="javascript://" onClick="toggle('div2', this)">Link2</a>
    <div class="myDiv" id="div2">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
    </div>
    <br />
 
    <a href="javascript://" onClick="toggle('div3', this)">Link3</a>
    <div class="myDiv" id="div3">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
    </div>
    <br />
</body>
</html>

and50 13.08.2008 15:26
большое спасибо.

and50 13.08.2008 22:26
помогите плз сделать код чуть по проще:)
<html>
<head>
    <script>
        // Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function(divID1, divID2, divID3, divID4, divID5, divID6, divID7, divID8, divID9, divID10, divID11, divID12,  divID13, divID14, divID15)
		 {
            // Ссылка на текущий открытый div:
            var currentDiv1 = document.getElementById(divID1);
			var currentDiv2 = document.getElementById(divID2);
			var currentDiv3 = document.getElementById(divID3);
			var currentDiv4 = document.getElementById(divID4);
			var currentDiv5 = document.getElementById(divID5);
			var currentDiv6 = document.getElementById(divID6);
			var currentDiv7 = document.getElementById(divID7);
			var currentDiv8 = document.getElementById(divID8);
			var currentDiv9 = document.getElementById(divID9);
			var currentDiv10 = document.getElementById(divID10);
			var currentDiv11 = document.getElementById(divID11);
			var currentDiv12 = document.getElementById(divID12);
			var currentDiv13 = document.getElementById(divID13);
			var currentDiv14 = document.getElementById(divID14);
			var currentDiv15 = document.getElementById(divID15);
            // Текущая ссылка:
            // Функция для "раскрытия" элемента:
 // Запоминаем и прячем ссылку:
//                currentAnchor = linkElement;
//                if	(currentAnchor.style.display = "none")
//				{currentAnchor.style.display = "block"}
//				else
//				{currentAnchor.style.display = "none"}
// вырубаем все		
			currentDiv1.style.display = "block";
			currentDiv2.style.display = "block";
			currentDiv3.style.display = "block";
			currentDiv4.style.display = "block";
			currentDiv5.style.display = "block";
			currentDiv6.style.display = "none";
			currentDiv7.style.display = "none";
			currentDiv8.style.display = "none";
			currentDiv9.style.display = "none";
			currentDiv10.style.display = "none";
			currentDiv11.style.display = "none";
			currentDiv12.style.display = "none";
			currentDiv12.style.display = "none";
			currentDiv13.style.display = "block";
			currentDiv14.style.display = "block";
			currentDiv15.style.display = "none";
           
        };
    </script>
    <style>
        .myDiv {
            display: none;
        }
    .style1 {color: #CC6666}
    </style>
</head>
<body>

<span class="style1">здесь будет меню</span><br>
<!--выводим блок меню -->
<div id="lMenuUp1"> <strong>Меню1</strong><br> </div>
<div id="lMenuUp2"> <strong>Меню2</strong><br> </div>
<div id="lMenuUp3"> <strong>Меню3</strong><br> </div>

<div class="myDiv" id="submenu1">
        Пункт 11<br>
        Пункт 12<br>
</div>
<div class="myDiv" id="submenu2">
       Пункт 21<br>
       Пункт 22<br>
</div>
<div class="myDiv" id="submenu3">
       Пункт 31<br>
       Пункт 32<br>
</div>

<div class="myDiv" id="lMenuDown1"> <strong>Меню1</strong><br> </div>
<div class="myDiv" id="lMenuDown2"> <strong>Меню2</strong><br> </div>
<div class="myDiv" id="lMenuDown3"> <strong>Меню3</strong><br> </div>



<hr>


<div class="myDiv" id="div1">
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
        Содержание<br />
</div>
<div class="myDiv" id="div2">
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
        Содержание1<br />
</div>
<div class="myDiv" id="div3">
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
        Содержание2<br />
</div>
<a href="javascript://" onClick="toggle('lMenuUp1', 'submenu1',  'lMenuDown2', 'lMenuDown3', 'div1', 'lMenuUp2', 'lMenuUp3', 'submenu2', 'submenu3', 'lMenuDown1', 'div2', 'div3', 'link2', 'link3', 'link1')" id='link1'>Link1</a><br>
<a href="javascript://" onClick="toggle('lMenuDown1', 'lMenuUp2', 'lMenuDown3', 'submenu1', 'div2', 'submenu2', 'submenu3', 'lMenuUp1', 'lMenuDown2', 'lMenuUp3', 'div1','div3', 'link1', 'link3', 'link2')" id='link2'>Link2</a><br>
<a href="javascript://" onClick="toggle('lMenuUp3', 'submenu3',  'lMenuDown1', 'lMenuDown2', 'div3', 'lMenuUp1', 'lMenuUp2', 'submenu1', 'submenu2', 'lMenuDown3', 'div1', 'div2', 'link1', 'link3', 'link3')" id='link3'>Link3</a><br>

<hr>




</body>
</html>

а то как то страшно выглядит

Андрей Параничев 13.08.2008 23:03
and50,
Сформулируйте задачу, я не понял что должен делать код.

and50 13.08.2008 23:09
код работает правильно просто я не разбираясь в JS написал как мог и он получился очень громоздко.
при на жатии на i-ю ссылку должно поднятся вверх и открытся i-е меню, открытся i-й div и спрятатся i- я ссылка.
заранее спасибо

M.C. 14.08.2008 11:44
Андрей, пытаюсь сделать как тут: http://anton.shevchuk.name/wp-demo/j...ccordion1.html
там справа есть иконка, когда закрыто, она показывает вниз, когда открыто - наверх (это один gif-рисунок, просто он стилями меняет свое положение)

вот как я представил код скрипта:
// Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Ссылка на текущий класс:
            var currentClass = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, classElement) {
            	// Запоминаем и прячем класс:
            	currentClass = classElement;
            	currentClass = document.getElementByClass("bg_headers");
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement, classElement) {
            	// Показываем класс и "забываем":
                currentClass = document.getElementbyClass("bg_headers_active");
                currentAnchor = null;

                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, classID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                var classElement = document.getElementByClass(classID)
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
                    if (divElement === currentDiv) {
                        close(currentDiv, currentClass);
                    // Если открыт другой div, то закрываем и открываем текущий:
                    } else if(currentDiv != null) {
                        close(currentDiv, currentClass);
                        open(divElement, classElement);
                    // Иначе - просто открываем:
                    } else {
                        open(divElement, classElement);
                    }
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();


вот что у меня в CSS:

.bg_headers {
	background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
	border: solid 1px #c4c4c4;
	padding: 3px;
}
.bg_headers:hover {
	background-color: #e3e2e2;
}
.bg_headers_active {
	background-position: right 5px;
}


но что-то не работает :(

Андрей Параничев 14.08.2008 13:10
M.C.,
Вам нужно примерно следующее:
// Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Текущая ссылка:
            var currentAnchor = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, linkElement) {
                // Запоминаем и прячем ссылку:
                currentAnchor = linkElement;
                // Прибавляем "_active" к имени класса:
                currentAnchor.className += "_active";
 
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                // Убираем "_active" и "забываем":
                currentAnchor.className = currentAnchor.className.replace("_active", "");
                currentAnchor = null;
 
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, link) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт какой-то div - закрываем.
                    if(currentDiv != null) close(currentDiv);
                    // Открываем вызваный.
                    open(divElement, link);
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();


Только учтите, что картинка должна находиться внутри ссылки, и стили прописываются для этой ссылки.

M.C. 14.08.2008 14:19
а если стиль для тега <td> ? я так понял в этом и проблема была, что я сделал для тега стиль, а тут скрипт для ссылки...

M.C. 14.08.2008 14:33
подумал немного, видимо для <td> тоже надо указывать id, чтобы знать какому <td> в данный момент присваивать тот или иной класс?

Андрей Параничев 14.08.2008 14:45
Выложите html кусок, который у вас под эту задачу. Я же не могу догадаться, какой именно элемент вы меняете при открытии\закрытии элемента.

В том примере, который вы давали, сверху большая ссылка, внутри которой уже отображается изображение. Ссылку можно сделать блоковым элементом и задать ей размеры через css:
.класс_ссылки {
    display: block;
    width: 100%;
    padding: 6px 0 6px 15px;
}

M.C. 14.08.2008 14:50
да, извините, вот кусок кода, для которого это должно работать:
<table width="100%">
<tr><td id="td1" class="bg_headers">
<a href="#" onclick="toggle('div1')">Ссылка 1</a>
</td></tr>
</table>
<div id="div1" class="myDiv">
Содержание 1
</div>


<table width="100%">
<tr><td id="td2" class="bg_headers">
<a href="#" onclick="toggle('div2')">Ссылка 2</a>
</td></tr>
</table>
<div id="div2" class="myDiv">
Содержание 1
</div>


<table width="100%">
<tr><td id="td3" class="bg_headers">
<a href="#" onclick="toggle('div3')">Ссылка 3</a>
</td></tr>
</table>
<div id="div3" class="myDiv">
Содержание 3
</div>


это стили:

.bg_headers {
	background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
	border: solid 1px #c4c4c4;
	padding: 3px;
}
.bg_headers:hover {
	background-color: #e3e2e2;
}
.bg_headers_active {
	background-position: right 5px;
}

M.C. 14.08.2008 17:43
Цитата:
Сообщение от Андрей Параничев (Сообщение 4546)
M.C.,
Вам нужно примерно следующее:

Только учтите, что картинка должна находиться внутри ссылки, и стили прописываются для этой ссылки.
попробовал этот вариант, не работает :( хотя в этом случае именно для ссылки и с тем вариантом стиля, как вы указали ниже... видимо в коде что-то не так, но знаний не хватает понять где чего.... (а вернее их отсутствие).

Андрей Параничев 20.08.2008 01:02
Вложений: 1
M.C.,
Я предлагал вот такой вариант. Если использовать таблицы принципиально, то могу объяснить, как исправить/переделать. Дело в том, что я написал сначала просто как пример, а сейчас - под конкретную задачу, и оба варианта не универсальны.

M.C. 22.08.2008 01:23
спасибо! под таблицы теперь уже не принципиально ;)

Lelik 08.09.2008 14:51
[quote=M.C.;4541]Андрей, пытаюсь сделать как тут: http://anton.shevchuk.name/wp-demo/j...ccordion1.html
там справа есть иконка, когда закрыто, она показывает вниз, когда открыто - наверх (это один gif-рисунок, просто он стилями меняет свое положение)

вот как я представил код скрипта:
// Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Ссылка на текущий класс:
            var currentClass = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, classElement) {
            	// Запоминаем и прячем класс:
            	currentClass = classElement;
            	currentClass = document.getElementByClass("bg_headers");
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement, classElement) {
            	// Показываем класс и "забываем":
                currentClass = document.getElementbyClass("bg_headers_active");
                currentAnchor = null;

                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, classID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                var classElement = document.getElementByClass(classID)
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
                    if (divElement === currentDiv) {
                        close(currentDiv, currentClass);
                    // Если открыт другой div, то закрываем и открываем текущий:
                    } else if(currentDiv != null) {
                        close(currentDiv, currentClass);
                        open(divElement, classElement);
                    // Иначе - просто открываем:
                    } else {
                        open(divElement, classElement);
                    }
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();


вот что у меня в CSS:

.bg_headers {
	background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
	border: solid 1px #c4c4c4;
	padding: 3px;
}
.bg_headers:hover {
	background-color: #e3e2e2;
}
.bg_headers_active {
	background-position: right 5px;
}


но что-то не работает :([/QUOT]

А вы уверены что есть такой метод - document.getElementByClass("bg_headers"); Даже если есть (у меня правда никогда не работало) то возврашает он коллекцию объектов а значит при обращении надо указывать еще индекс в коллекции document.getElementByClass("bg_headers")[0];

magistr_bender 15.09.2008 11:14
сделай это массивом всё
типо array(divID1, divID1, ....)
а потом в коде переворку циклом фор делай

Леха 16.09.2008 23:01
а как можно сделать hide, только чтоб блок открывался медленно...

Леха 16.09.2008 23:02
всмысле плавно...

ZoNT 16.09.2008 23:13
по таймауту понемногу...

Леха 17.09.2008 11:18
А примерчик можно?

ZoNT 17.09.2008 11:34
можно. гугли...

Леха 17.09.2008 12:25
Спасибо.
вот че нашол примерно то что мне надо.
<html><head>
<script type="text/javascript" src="jquery.js"></script>

<SCRIPT type=text/javascript>
function initSpoilers(context)
{
var context = context || 'body';
$('div.spoiler-head', $(context))
.click(function(){
$(this).toggleClass('unfolded');
$(this).next('div.spoiler-body').slideToggle('fast');
})
;
}

$(document).ready(function(){
initSpoilers('body');
});
</SCRIPT>
<link href="spoiler.css" rel="stylesheet" type="text/css" />
</head><body>
<div class="spoiler-wrap"><div class="spoiler-head folded clickable">1</div><div class="spoiler-body">2</div></div>
</body></html>



содержимое css
.spoiler-wrap {
clear: both;
}
.spoiler-body {
display: none;
}
.clickable {
cursor: pointer;
}
.folded {
display: block;
}
.unfolded {
display: block;
}



спринципе все отлично работает, но как сделать чтоп она отъезжала не от клика а от наведения мыши...

ZoNT 17.09.2008 12:29
так как здесь используется jquery (а я категорически неприемлю фреймворки), то иди в раздел jquery. Или ищи в коде слово click и меняй на что-то типа mouseover (как это реализовано в jquery я не знаю).

Леха 17.09.2008 12:44
Спасибо работаеть = )

Nikolai 04.10.2008 18:07
Чудно и беспроблемно работает. Только один вопрос: Как сделать, чтобы изначально, при загрузке, показывалось содержимое div 1?

Андрей Параничев 04.10.2008 20:10
Nikolai,
<body onload="toggle('div1')">

Или указать этот код прямо после дива:
<div id="div1">...</div>
<script type="text/javascript">toggle('div1')</script>

Nikolai 04.10.2008 20:40
Огромное спасибо!

А еще такой вопрос. Там в комментарии к коду есть такое " // Тут можно добавить эффект "плавного" открытия:". Не подскажите код для этого эффекта?

Андрей Параничев 04.10.2008 21:25
Вложений: 1
Nikolai,
Ну вот например так.

magistr_bender 06.10.2008 08:46
а у меня в таком варианте на мозилке бага... только 1 раз открывается.. потом тупо не открывается
на ие всё замечательно.. и кстати стрелки глючит ещё

TrasheR 14.01.2009 19:36
У меня следующая проблема. Сделал меню как писали в начале этой темы. Вот тот код:
Код:
<script>
        // Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement) {
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт какой-то div - закрываем.
                    if(currentDiv != null) close(currentDiv);
                    // Открываем вызваный.
                    open(divElement);
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();
    </script>
    <style>
        .myDiv {
            display: none;
        }
    </style>
Все работает прекрасно, но у меня возникла вот какая проблема....
Содержимое дива .myDiv генерируется скриптом:
Код:
if ($CURRENT_DEPTH==1) {  //это главная категория меню
 ?>
        <li><a href="javascript://" onClick="toggle('<?=$arSection["ID"]?>')"><?=$arSection["NAME"]?></a></li>
<?
$ss = $arSection["ID"];
 } ?>
<?
if ($CURRENT_DEPTH > 1):    //это подкатегории
?><div class="myDiv" id=<?=$ss?>>
<li><a href="<?=$arSection["SECTION_PAGE_URL"]?>"><?=$arSection["NAME"]?></a></li>

<? endif?>
Смысл в том, что при нажатии на категорию появляется только один элемент дива myDiv, а остальные скрыты. Я так понял что нужно как то модифицировать вот этот кусок скрипта:
Код:
<style>
        .myDiv {
            display: none;
        }
    </style>
но в яве я полный ноль и слезно прошу мне помочь....

Вот исходный код страницы после обработки скрипта:
Код:
<div class="catalog-section-list">

<ul>

<li><a href="javascript://" onClick="toggle('90')">Модульные системы на основе круглой трубы</a></li>

<ul><div class="myDiv" id=90>
<li><a href="/index.php?SECTION_ID=99">FLOW </a></li>
</div>
<div class="myDiv" id=90>
<li><a href="/index.php?SECTION_ID=93">Joker </a></li>
</div>
<div class="myDiv" id=90>
<li><a href="/index.php?SECTION_ID=100">Loop </a></li>
</ul>        <li><a href="javascript://" onClick="toggle('91')">Модульные системы на основе перфорированных стоек</a></li>
<ul><div class="myDiv" id=91>
<li><a href="/index.php?SECTION_ID=104">раз</a></li>
</div>
</ul>        <li><a href="javascript://" onClick="toggle('92')">Сетки и аксессуары</a></li>
<ul><div class="myDiv" id=92>
<li><a href="/index.php?SECTION_ID=103">два</a></li>
</div>
</ul>

Андрей Параничев 14.01.2009 19:49
TrasheR,
У вас неправильный вывод из php. Во-первых, id элемента не может состоять из цифр, или начинаться с цифры. Во вторых, один id может быть назначен только один раз - вам нужно сгруппировать ваши пункты в один элемент div с заданным id, а не каждый пункт в отдельный.

TrasheR 14.01.2009 20:48
Андрей Параничев, огромное Вам спасибо за помощь. Все получилось. А то четвертый день бился над этим ;)

UncleGluk 15.01.2009 17:43
Андрей Параничев,
Замечательный скрипт,спасибо. На основе него много чего можно сделать.. Единственное "но" - при выключенном JavaScript ссылки в DIV все равно отображаются, тогда как обычные, текст или имидж не отображается.. странно как то.. В чем может быть дело? :confused:
Разрешен: Запрещен:

проверялось в FF


Часовой пояс GMT +3, время: 04:27.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице