Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Древовидное меню и селекторы (https://javascript.ru/forum/jquery/11328-drevovidnoe-menyu-i-selektory.html)

youstm 18.08.2010 10:10
Древовидное меню и селекторы
 
При клике на меню выделяются все старшие категории и сама категория на которую кликнули... работает тока на первый клик. дальше хрень полная... как сделать что бы при повторном клике на другую категорию первое выделение удалялось. Делал с событием 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>

inGray 18.08.2010 17:18
Попробуй вот так? 
<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>

youstm 18.08.2010 17:32
inGray,
спасибо за ответ, но это не то что нужно... в твоём пример выделяется только THIS... мне нужно всю иерархию... + очистка старого клика если кликнули в другое место.

inGray 18.08.2010 17:46
Думается, что нужно тебе иначе реализовывать выделение в целом. Пример: кликни на ветку где два Submenu, вся ветка до корня выделилась? А теперь по соседнему кликни... Он выделился а весь путь наоборот.
Как на jQuery написать решение затрудняюсь сказать.. скудно его пока знаю.
На чистом JS я бы написал функции снятия выделения и установки и по очереди их запускал при клике.

youstm 18.08.2010 17:59
inGray,
решение уже найдено, хочется услышать ещё всевозможные решения

rgwergwegwerg 15.09.2014 12:39 
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 15.09.2014 12:42
можно еще в тему "рекурсия" как практически применимый(с небольшим допилом) пример.


Часовой пояс GMT +3, время: 08:24.