Javascript.RU

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

Древовидное меню и селекторы
При клике на меню выделяются все старшие категории и сама категория на которую кликнули... работает тока на первый клик. дальше хрень полная... как сделать что бы при повторном клике на другую категорию первое выделение удалялось. Делал с событием Hover всё норм работает а при Click не могу разобраться как всё это сделать... :?:

Код:
<style type="text/css">.bold {font-weight: bold; }.menu .li .submenu {font-weight: normal; } 
</style>
<script type="text/javascript">
$().ready(function(){
    $("ul.menu li.li").click(function(){
    $(this)[$(this).hasClass("bold") ? "removeClass" : "addClass"]("bold");        
    }) 
})
</script>
<ul class="menu">
  <li class="li">Menu 
    <ul class="submenu">
      <li class="li">Submenu
      </li>
      <li class="li">Submenu 
        <ul class="submenu">
          <li class="li">Submenu
          </li>
          <li class="li">Submenu
          </li>
        </ul>
      </li>
    </ul>    
  </li>  
  </li>
  <li class="li">Menu 
    <ul class="submenu">
      <li class="li">Submenu
      </li>
      <li class="li">Submenu 
        <ul class="submenu">
          <li class="li">Submenu
          </li>
          <li class="li">Submenu
          </li>
        </ul>
      </li>
    </ul>    
  </li>  
  </li>
</ul>
Ответить с цитированием
  #2 (permalink)  
Старый 18.08.2010, 16:18
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

Попробуй вот так?
<script type="text/javascript">
            $().ready(function(){
                $(".clickable").click(function(){
                    $(this)[$(this).hasClass("bold") ? "removeClass" : "addClass"]("bold");
                })
            })
        </script>

<ul class="menu">
            <li><a class="clickable">Menu</a>
                <ul class="submenu">
                    <li><a class="clickable">Submenu</a>
                    </li>
                    <li><a class="clickable">Submenu</a>
                        <ul class="submenu">
                            <li><a class="clickable">Submenu</a>
                            </li>
                            <li><a class="clickable">Submenu</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a class="clickable">Menu</a>
                <ul class="submenu">
                    <li><a class="clickable">Submenu</a>
                    </li>
                    <li><a class="clickable">Submenu</a>
                        <ul class="submenu">
                            <li><a class="clickable">Submenu</a>
                            </li>
                            <li><a class="clickable">Submenu</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

        </ul>
Ответить с цитированием
  #3 (permalink)  
Старый 18.08.2010, 16:32
Новичок на форуме
Отправить личное сообщение для youstm Посмотреть профиль Найти все сообщения от youstm
 
Регистрация: 18.08.2010
Сообщений: 3

inGray,
спасибо за ответ, но это не то что нужно... в твоём пример выделяется только THIS... мне нужно всю иерархию... + очистка старого клика если кликнули в другое место.
Ответить с цитированием
  #4 (permalink)  
Старый 18.08.2010, 16:46
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

Думается, что нужно тебе иначе реализовывать выделение в целом. Пример: кликни на ветку где два Submenu, вся ветка до корня выделилась? А теперь по соседнему кликни... Он выделился а весь путь наоборот.
Как на jQuery написать решение затрудняюсь сказать.. скудно его пока знаю.
На чистом JS я бы написал функции снятия выделения и установки и по очереди их запускал при клике.
Ответить с цитированием
  #5 (permalink)  
Старый 18.08.2010, 16:59
Новичок на форуме
Отправить личное сообщение для youstm Посмотреть профиль Найти все сообщения от youstm
 
Регистрация: 18.08.2010
Сообщений: 3

inGray,
решение уже найдено, хочется услышать ещё всевозможные решения
Ответить с цитированием
  #6 (permalink)  
Старый 15.09.2014, 11:39
Интересующийся
Отправить личное сообщение для rgwergwegwerg Посмотреть профиль Найти все сообщения от rgwergwegwerg
 
Регистрация: 15.09.2014
Сообщений: 19

var  TreeMenu= {
	    TMroot:	[['Строительство домов', 'TreeMenu.TMsub0'],
			 ['Ремонт квартир', 'TreeMenu.TMsub1'],	
			 ['Ремонт машин', 'null', ''],
			 ['Ремонт бытовой техники', 'null', ''],
			 ['Ремонт электронники', 'null', ''],
			 ['IT и интернет', 'TreeMenu.TMsub2']],
			 
	    TMsub0:	[['Плотник', 'TreeMenu.TMsub00', ''],
			 ['Каменщик', 'TreeMenu.TMsub01', ''],
			 ['Земельные работы', 'TreeMenu.TMsub02', '']],

	    TMsub00:	[['master 0', 'null', '0']],

	    TMsub01:	[['master 1', 'null', '1'],
			 ['master 2', 'null', '2']],

	    TMsub02:	[['master 3', 'null', '3'],
			 ['master 4', 'null', '3'],
			 ['master 5', 'null', '3']],
	    
	    TMsub1:	[['Сантехник', 'TreeMenu.TMsub10'],
			 ['Отделочные работы', 'TreeMenu.TMsub11']],

	    TMsub10:	[['master 6', 'null', '3']],

	    TMsub11:	[['master 7', 'null', '3'],
			 ['master 8', 'null', '3']],

	    TMsub2:	[['Разработка сайтов', 'TreeMenu.TMsub20']],
	    
	    TMsub20:	[['Ученик Мастера Фу', 'null', '3']],
	    
	    TMmaster:	[[0, 54, 'Иван Иванович Иванов', 'длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
			 [1, 51, 'Петрович', 'описанме Петровича длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
			 [2, 51, 'Ух-бригада', 'описанме ух-бригады длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека'],
			 [3, 51, 'Пустышка', 'задолбался я все это писать...  длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека длинное описание и нудное описание конретного человека описание линное описание и нудное описание конретного человека описание и нудное описание и нудное описание конретного человека']],

	    TMdiv:	null,
	    TMdivTitle:	null,
	    TMdepth:	0 };

TreeMenu.squeeze= function(){
    var i= 0, j, elements= [];

    for(; i< TreeMenu.TMdiv.childNodes.length; i++)
      if(TreeMenu.TMdiv.childNodes[i].tagName== 'SPAN'){
	elements= TreeMenu.TMdiv.childNodes[i].getElementsByTagName('SPAN');
	for(j= 0; j< elements.length; j++)
	  elements[j].style.display= 'none';
	}
    elements= [];
return
}

TreeMenu.prinKey= function(){
  var tbl_tag= document.createElement("TABLE"), row, cell, i= 0,
      button1, button2;
  const COL= 3;
      tbl_tag.className= 'Title'
      row=  tbl_tag.insertRow(-1);
      for(;i< COL; i++)
	cell= row.insertCell(-1);
      
      row=  tbl_tag.insertRow(-1);
      cell= row.insertCell(-1);
      cell= row.insertCell(-1);
	button1= document.createElement('BUTTON');
	button1.innerHTML= 'свернуть всё';
	button1.onclick= TreeMenu.squeeze;
	cell.appendChild(button1);
	button1= document.createElement('BUTTON');
	button1.innerHTML= 'по рейтенгу';
	cell.appendChild(button1);
	button1= document.createElement('BUTTON');
	button1.innerHTML= 'по алфавиту';
	cell.appendChild(button1);
      cell= row.insertCell(-1);
            
      row=  tbl_tag.insertRow(-1);
      for(i= 0; i< COL; i++)
	cell= row.insertCell(-1);
 
       TreeMenu.TMdivTitle.appendChild(tbl_tag);
return
}

TreeMenu.init= function(id_name_main, id_name_title){ 
    TreeMenu.TMdiv= document.getElementById(id_name_main);
    TreeMenu.TMdivTitle= document.getElementById(id_name_title);
    TreeMenu.prinKey();
return
}

TreeMenu.printItem= function(master_id){
    const ID= 0, SCR= 1, SHRT= 2, LNG= 3;
 
    for(var i= 0; i< TreeMenu.TMmaster.length; i++)
      if(TreeMenu.TMmaster[i][ID]== master_id){
	master= TreeMenu.TMmaster[i];
	break;
      }
    MainBlock.print(master[SHRT], master[LNG]);
return
}

TreeMenu.showItem= function(ev){
    var i= 0, span_s= [];

    ev.stopPropagation? ev.stopPropagation(): ev.cancelBubble= true;  
    for(; i< this.childNodes.length; i++)
      if(this.childNodes[i].tagName== 'SPAN')
	 span_s.push(this.childNodes[i]);
    if(span_s.length)
      for(i= 0; i< span_s.length; i++)
	if(span_s[i].style.display== 'none')
	  span_s[i].style.display= 'block';
	else
	  span_s[i].style.display= 'none';
    else
      if(this.id)
	TreeMenu.printItem(this.id);
      else
	alert('нет подкатегорий');
    span_s= [];
return
}

TreeMenu.print= function(){
const ITEM= 0, NXT= 1, MST= 2;

function print_span(str, parent){
    var span_tag= document.createElement('SPAN'),
	prgf_tag= document.createElement('P'), i= 0;

    prgf_tag.innerHTML= str;
    prgf_tag.className= 'TMitem';
    span_tag.appendChild(prgf_tag)
    span_tag.onclick= TreeMenu.showItem;
    span_tag.className= 'TMlevel'+ TreeMenu.TMdepth;
    if(TreeMenu.TMdepth)
      span_tag.style.display= 'none';
    parent.appendChild(span_tag);
return span_tag
}
 
function print_item(item, parent){
    var link_nxt= eval(item[NXT])

    parent= print_span(item[ITEM], parent);
    if(link_nxt){
	TreeMenu.TMdepth++;
	start_print_item(link_nxt, parent);
	TreeMenu.TMdepth--;
    }else
	parent.id= item[MST];
return
}

function start_print_item(item, parent){
    for(var i= 0; i< item.length; i++)
	print_item(item[i], parent);
return
}

start_print_item(TreeMenu.TMroot, TreeMenu.TMdiv);
TreeMenu.TMdepth= 0;

return
}

TreeMenu.init('TMmenuDivMain', 'TMmenuDivTitle');
TreeMenu.print();

сами стили примерно такие:
.TMlevel0 { cursor: pointer;
display: block }

.TMlevel1 { padding-left: 5%;
display: block}

.TMlevel2 { padding-left: 15%;
display: block}

добавление глубины вложенности сводится к дорисовке стилей TMlevel3, 4, 5 ....... и у последнего элемента будет не null а имя дочернего массива, у самого "глубокого" элемента конечно же должен быть нуль

Последний раз редактировалось rgwergwegwerg, 18.09.2014 в 10:35.
Ответить с цитированием
  #7 (permalink)  
Старый 15.09.2014, 11:42
Интересующийся
Отправить личное сообщение для rgwergwegwerg Посмотреть профиль Найти все сообщения от rgwergwegwerg
 
Регистрация: 15.09.2014
Сообщений: 19

можно еще в тему "рекурсия" как практически применимый(с небольшим допилом) пример.

Последний раз редактировалось rgwergwegwerg, 16.09.2014 в 20:19.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 16:50
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 14:31
анимированное меню на jquery глючит в ie leCadavreExquis jQuery 3 30.12.2009 16:30
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 10:49
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 21:05