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)

Леха 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, время: 00:15.