Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.11.2015, 06:28
Новичок на форуме
Отправить личное сообщение для pitbullalex Посмотреть профиль Найти все сообщения от pitbullalex
 
Регистрация: 11.11.2015
Сообщений: 6

toggly скрывает/раскрывает div, но если не скрыть его а выбрать следующую ссылку div
toggly скрывает/раскрывает div, но если не скрыть его а выбрать следующую ссылку div открывается поверх предыдущего, и что бы теперь отбразить самый первый не закрытый div,нужно сначала скрывать все после открытые, умоляю подскажите как сделать что бы всегда показывался только один div.
<div id="maket">
<div id="header">
<form name="search" action="search.php" method="post" class="search">
  <input type="search" name="query" placeholder="поиск по ФИО/должности/отделу" class="input" />
  <input type="submit" name="" value="" class="submit" />
</form>
</div>
 
<div id='left' class='toggle' onclick='display = 'none''> <table border = 1 width = 100%><tr><td colspan = 3 align = center><h4>Руководство  филиала</h4></td></tr>
<tr><td>
     
<a class='toggler' href='#'>Багов Вячеслав Фёдорович</a>
<div id='content' class='content' style='display:none'> 
<table border = 1 width = 100%>
<tr><td>ФИО</td><td>Багов Вячеслав Фёдорович</td></tr>
<tr><td>Должность</td><td>Директор</td></tr>
<tr><td>Подразделение</td><td>Руководство  филиала</td></tr>
<tr><td>Телефон</td><td>(3462) 37-77-01</td></tr>
<tr><td>Телефон газовый</td><td></td></tr>
<tr><td>Телефон внутренний</td><td>101</td></tr>
<tr><td>Телефон мобильный</td><td>9227978135</td></tr>
<tr><td>Здание/номер кабинета</td><td> </td></tr>
<tr><td>E-mail</td><td></td></tr>
<tr><td>Фото</td><td><img src='photo/Photo1.jpg' width='150' height='200' alt='Багов Вячеслав Фёдорович'></td></tr>
 
</table>
</div>
 
</td>
<td>Директор</td>
<td>(3462)</td>
</tr><tr><td colspan = 3 align = center><h4>Участок погрузки</h4></td></tr>
<tr><td>
     
<a class='toggler' href='#'>Сменные работники</a>
<div id='content' class='content' style='display:none'> 
<table border = 1 width = 100%>
<tr><td>ФИО</td><td>Сменные работники</td></tr>
<tr><td>Должность</td><td>Приемосдатчик груза и багажа</td></tr>
<tr><td>Подразделение</td><td>Участок погрузки</td></tr>
<tr><td>Телефон</td><td>(3462)</td></tr>
<tr><td>Телефон газовый</td><td>(771) 54-728</td></tr>
<tr><td>Телефон внутренний</td><td>1174 1175</td></tr>
<tr><td>Телефон мобильный</td><td></td></tr>
<tr><td>Здание/номер кабинета</td><td> </td></tr>
<tr><td>E-mail</td><td></td></tr>
<tr><td>Фото</td><td><img src='photo/noavatar.jpg' width='150' height='200' alt='Сменные работники'></td></tr>
 
</table>
</div>
 
</td>
<td>Приемосдатчик груза и багажа</td>
<td>(3462) 954-728</td>
</tr><tr><td colspan = 3 align = center><h4>Диспетчерский отдел</h4></td></tr>
<tr><td>
     
<a class='toggler' href='#'>Баг Лариса Викторовна</a>
<div id='content' class='content' style='display:none'> 
<table border = 1 width = 100%>
<tr><td>ФИО</td><td>Баг Лариса Викторовна</td></tr>
<tr><td>Должность</td><td>Заместитель</td></tr>
<tr><td>Подразделение</td><td>Диспетчерский отдел</td></tr>
<tr><td>Телефон</td><td>(3462)</td></tr>
<tr><td>Телефон газовый</td><td>(771)</td></tr>
<tr><td>Телефон внутренний</td><td>1152</td></tr>
<tr><td>Телефон мобильный</td><td></td></tr>
<tr><td>Здание/номер кабинета</td><td> </td></tr>
<tr><td>E-mail</td><td><a href=mailto:blv@mail.ru>blv@mail.ru</a></td></tr>
<tr><td>Фото</td><td><img src='photo/noavatar.jpg' width='150' height='200' alt='Баг Лариса Викторовна'></td></tr>
 
</table>
</div>
 
</td>
<td>Заместитель</td>
<td>(3462)</td>
</tr></table></div>
 
</font></TD></TR></TABLE></CENTER>
</TD>
</TR>
</TABLE>
</form>
</TD></TR></TBODY></TABLE>
 
<div id="footer"></div>
</div>


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';
            
        }
        else {
            content.style.display = 'block';
            
        }
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
};
 
// Ищем блоки с классом «toggle» по событию DOMContentLoaded
base.init.push(function() {
    toggler.process();
});
 
// Запускаем проверку готовности DOM
base.check();





[CSS]
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-size: 18px;
padding: 10px;
}
td {
background: #F5D7BF;
padding: 2px;
margin:0 auto;
}
 
 
#maket {
width:100%;
margin:0 auto;
}
#header{
 
}
#left{
top: 8%;
width:60%;
float:left;
}
#content{
/*background-color:#8080FF;
width:40%;
height:60%;
margin-right:61%;
float:right;*/
 
    position:  fixed;/*absolute | fixed | relative | static | inherit  Абсолютное позиционирование */
    top: 8%; /* Положение от нижнего края */
    left: 61%; /* Положение от правого края */
    right: 5%; /* Положение от правого края */
    line-height: 1px;
    height: 90%;
 
}
#footer{
 
clear:both;
}
 
 
.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-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
}
[/CSS]
Ответить с цитированием
  #2 (permalink)  
Старый 12.11.2015, 09:54
Новичок на форуме
Отправить личное сообщение для pitbullalex Посмотреть профиль Найти все сообщения от pitbullalex
 
Регистрация: 11.11.2015
Сообщений: 6

Помогите пожалуйста, хотя бы ткните носом куда копать
Ответить с цитированием
  #3 (permalink)  
Старый 12.11.2015, 10:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Сообщение от pitbullalex
куда копать
нормальный рабочий макет надо делать а не кусками
поэтому описание проблемы понятно только вам

и так открывашка 235 ... кому интересно соберите кубики самостоятельно.
// Функции для работы с панельками
var toggler = {
    current : null,
    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(toggler.current && toggler.current != content) {toggler.current.style.display = 'none'};
        toggler.current = content;
        if(content.style.display == 'block') {
            content.style.display = 'none';

        }
        else {
            content.style.display = 'block';

        }
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
};
Ответить с цитированием
  #4 (permalink)  
Старый 12.11.2015, 13:58
Новичок на форуме
Отправить личное сообщение для pitbullalex Посмотреть профиль Найти все сообщения от pitbullalex
 
Регистрация: 11.11.2015
Сообщений: 6

ВЫ ЛУЧШИЙ, огромнейшее Вам спасибо, очень выручили!
Ответить с цитированием
  #5 (permalink)  
Старый 19.11.2015, 11:18
Новичок на форуме
Отправить личное сообщение для pitbullalex Посмотреть профиль Найти все сообщения от pitbullalex
 
Регистрация: 11.11.2015
Сообщений: 6

А подскажите еще пожалуйста , как изменить эти функции, что бы вызывать не только для класса "'content", а и для других классов, что бы не плодить этих функций (и если не сложно напишите как после этого их вызывать в HTML)
(извините за глупую просьбу, но вы же понимаете, что я дуб в JS)

// Функции для работы с панельками
var toggler = {
    current : null,
    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(toggler.current && toggler.current != content) 
		{toggler.current.style.display = 'none';

	     };
        toggler.current = content;
        if(content.style.display == 'block') {
            content.style.display = 'none';
        }
        else {
            content.style.display = 'block';
        }
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
};
Ответить с цитированием
  #6 (permalink)  
Старый 19.11.2015, 18:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

pitbullalex,
поиск по слову открывашка
Ответить с цитированием
  #7 (permalink)  
Старый 20.11.2015, 09:04
Новичок на форуме
Отправить личное сообщение для pitbullalex Посмотреть профиль Найти все сообщения от pitbullalex
 
Регистрация: 11.11.2015
Сообщений: 6

да я много способов нашел, и JS и Jquery , но мне нужен именно этот, т.к. остальные подвешивают IE =( а с этим кодом, он более менее быстро справляется
Ответить с цитированием
  #8 (permalink)  
Старый 20.11.2015, 09:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

pitbullalex,
весь ваш огромный код можно сократить до 10 строк тут
Закрытие и открытие дива по клику
и подобных примерах
Сообщение от pitbullalex
т.к. остальные подвешивают IE
можно выбрать самые простые как в примере выше будет работать везде и быстро.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрыть кнопку, если поле div, который она выводит пустой SuperTester Общие вопросы Javascript 5 18.03.2015 23:44