Slideup и вниз OnClick выпадающего меню

<style> 

.clear{ 
    clear:both; 
} 

#mainContainer{ 
    width:760px; 
    text-align:left; 
    margin:0 auto; 
    background-color: #FFF; 
    border-left:1px solid #000; 
    border-right:1px solid #000; 
    height:100%; 
} 

#topBar{ 
    width:760px; 
    height:100px; 
} 
#leftMenu{ 
    float:left; 
    border:1px #c2cfde solid; 
    width:100%; 
} 
#mainContent{ 
    width: 520px; 
    padding-right:10px; 
    float:left; 
} 

#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem { 
    color:#000; 
} 

#dhtmlgoodies_slidedown_menu li{ 
    list-style-type:none; 
    position:relative; 
    border-bottom:1px #c2c2c4 solid; 
} 
#dhtmlgoodies_slidedown_menu ul li ul li:last-child{   
    border-bottom:0px #c2c2c4 solid; 
} 
#dhtmlgoodies_slidedown_menu ul{ 
    margin:0px; 
    padding:0px; 
    position:relative; 

} 

#dhtmlgoodies_slidedown_menu div{ 
    margin:0px;  
    padding:0px; 
    background-color:#EAEAEA; 
} 
#dhtmlgoodies_slidedown_menu div ul li a{ 
    margin-left:10px; 
} 
/* Layout CSS */ 
#dhtmlgoodies_slidedown_menu{ 
    font-size:12px; 
} 

/* All A tags - i.e menu items. */ 
#dhtmlgoodies_slidedown_menu a{ 
    color: #000; 
    text-decoration:none; 
    display:block; 
    clear:both; 
    padding:8px 8px 8px 20px; 
} 

/* Active menu item */ 
#dhtmlgoodies_slidedown_menu .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_active.png) no-repeat 0 0 !important; 
} 

#slideDiv1 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
    background:#eaeaea; 
} 

#slideDiv2 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 

#slideDiv3 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 

#slideDiv4 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 

#slideDiv5 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 

#slideDiv6 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 
#slideDiv7 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 
#slideDiv8 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 
#slideDiv9 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 
#slideDiv10 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 
#slideDiv11 .dhtmlgoodies_activeItem { 
    background:url(../images/new_layout/icon_item.png) no-repeat #eaeaea !important; 
    color:#000 !important; 
} 

/* 
A tags 
*/ 
#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{ /* Main menu items */ 
    background:url(../images/new_layout/icon_deactive.png) no-repeat 0 0 ; 
} 

#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */ 
    color:#000; 
    padding-left:25px; font-size:12px; 
    background:url(../images/new_layout/icon_item.png) #eaeaea no-repeat 0 0 ; 

} 
#dhtmlgoodies_slidedown_menu div li:hover{ /* Sub menu items */ 
    background:url(../images/new_layout/icon_item.png) #c5c5c5 no-repeat; cursor:pointer; 
} 
#dhtmlgoodies_slidedown_menu .slMenuItem_depth2:hover{ /* Sub menu items */ 
    background:url(../images/new_layout/icon_item.png) #c5c5c5 no-repeat; cursor:pointer; 
} 
#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{ /* Sub menu items */ 
    margin-top:1px; 
    font-style:italic; 
    color:blue; 
} 
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{ /* Sub menu items */ 
    margin-top:1px; 
    color:red; 
} 
#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{ /* Sub menu items */ 
    margin-top:1px; 
} 
#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{ 
    padding:1px; 
} 
#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{ 

} 
#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{ 
    margin-left:10px; 
    padding:1px; 
} 
#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{ 
    margin-left:15px; 
    padding:1px; 
} 
</style> 
<div id="leftMenu"> 
<!-- START OF MENU --> 
<div id="dhtmlgoodies_slidedown_menu"> 
<ul> 
<li><a href="#">Financials</a> 
<ul> 
<li><a >Company&nbsp;Financials</a></li> 
<li><a >Competitors</a></li> 
</ul> 
</li> 
<li><a href="#">Support</a> 
<ul> 
<li><a href="#">Phone</a></li> 
<li><a href="#">Email</a></li> 
<li><a href="#">QnA</a></li> 
</ul> 
</li> 
<li><a href="#">History</a> 
<ul> 
<li><a href="#">1900 - 1940</a></li> 
<li><a href="#">1941 - 1980 </a></li> 
<li><a href="#">1981 - Present time</a>                    </li> 
</ul> 
</li> 
</ul> 
</div> 
</div> 
<script type="text/javascript"> 
var expandFirstItemAutomatically = false; // Expand first menu item automatically ? 
var initMenuIdToExpand = true; // Id of menu item that should be initially expanded. the id is defined in the <li> tag. 
var expandMenuItemByUrl = false; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand 
var initialMenuItemAlwaysExpanded = true; // NOT IMPLEMENTED YET 
var initSubMenuId = ''; 




var dhtmlgoodies_slmenuObj; 
var divToScroll = false; 
var ulToScroll = false; 
var divCounter = 0; 
var otherDivsToScroll = new Array(); 
var divToHide = false; 
var parentDivToHide = new Array(); 
var ulToHide = false; 
var offsetOpera = 0; 
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1; 
var slideMenuHeightOfCurrentBox = 0; 
var objectsToExpand = new Array(); 
var initExpandIndex = 0; 
var alwaysExpanedItems = new Array(); 

var dg_activeItem = null; 

function popMenusToShow() 
{ 
var obj = divToScroll; 
var endArray = new Array(); 
while(obj && obj.tagName!='BODY'){ 
if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){ 
var objFound = -1; 
for(var no=0;no<otherDivsToScroll.length;no++){ 
if(otherDivsToScroll[no]==obj){ 
objFound = no; 
} 
} 
if(objFound>=0){ 
otherDivsToScroll.splice(objFound,1); 
} 
} 
obj = obj.parentNode; 
} 
} 

function showSubMenu(e,inputObj) 
{ 

if(this && this.tagName)inputObj = this.parentNode; 
if(inputObj && inputObj.tagName=='LI'){ 
divToScroll = inputObj.getElementsByTagName('DIV')[0]; 
for(var no=0;no<otherDivsToScroll.length;no++){ 
if(otherDivsToScroll[no]==divToScroll)return; 
} 
} 
hidingInProcess = false; 
if(otherDivsToScroll.length>0){ 
if(divToScroll){ 
if(otherDivsToScroll.length>0){ 
popMenusToShow(); 
} 
if(otherDivsToScroll.length>0){ 
autoHideMenus(); 
hidingInProcess = true; 
} 
} 
} 
if(divToScroll && !hidingInProcess){ 
divToScroll.style.display=''; 
otherDivsToScroll.length = 0; 
otherDivToScroll = divToScroll.parentNode; 
otherDivsToScroll.push(divToScroll); 
while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){ 
if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){ 
otherDivsToScroll.push(otherDivToScroll); 

} 
otherDivToScroll = otherDivToScroll.parentNode; 
} 
ulToScroll = divToScroll.getElementsByTagName('UL')[0]; 
if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub(); 
} 

if(e || inputObj) { 

if(dg_activeItem) { 
dg_activeItem.className = dg_activeItem.className.replace('dhtmlgoodies_activeItem',''); 
} 
var aTags = inputObj.getElementsByTagName('A'); 
if(aTags.length>0) { 
aTags[0].className = aTags[0].className + ' dhtmlgoodies_activeItem'; 
dg_activeItem = aTags[0]; 
if(aTags[0].href.indexOf('#') == -1 || aTags[0].href.indexOf('#') < aTags[0].href.length-1){ 
return true; 
} 
} 

} 

return false; 


} 



function autoHideMenus() 
{ 
if(otherDivsToScroll.length>0){ 
divToHide = otherDivsToScroll[otherDivsToScroll.length-1]; 
parentDivToHide.length=0; 
var obj = divToHide.parentNode.parentNode.parentNode; 
while(obj && obj.tagName=='DIV'){ 
if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj); 
obj = obj.parentNode.parentNode.parentNode; 
} 
var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox); 
if(tmpHeight<0)tmpHeight=0; 
if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px'; 
ulToHide = divToHide.getElementsByTagName('UL')[0]; 
slideMenuHeightOfCurrentBox = ulToHide.offsetHeight; 
scrollUpMenu(); 
}else{ 
slideMenuHeightOfCurrentBox = 0; 
showSubMenu(); 
} 
} 


function scrollUpMenu() 
{ 

var height = divToHide.offsetHeight; 
height-=15; 
if(height<0)height=0; 
divToHide.style.height = height + 'px'; 

for(var no=0;no<parentDivToHide.length;no++){ 
parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px'; 
} 
if(height>0){ 
setTimeout('scrollUpMenu()',5); 
}else{ 
divToHide.style.display='none'; 
otherDivsToScroll.length = otherDivsToScroll.length-1; 
autoHideMenus(); 
} 
} 

function scrollDownSub() 
{ 
if(divToScroll){ 
var height = divToScroll.offsetHeight/1; 
var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height)); 
height = height +offsetMove ; 
divToScroll.style.height = height + 'px'; 

for(var no=1;no<otherDivsToScroll.length;no++){ 
var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove; 
otherDivsToScroll[no].style.height = tmpHeight + 'px'; 
} 
if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else { 
divToScroll = false; 
ulToScroll = false; 
if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){ 
initExpandIndex++; 

showSubMenu(false,objectsToExpand[initExpandIndex]); 
} 
} 
} 
} 

function initSubItems(inputObj,currentDepth) 
{ 
divCounter++; 
var div = document.createElement('DIV'); // Creating new div 
div.style.overflow = 'hidden'; 
div.style.position = 'relative'; 
div.style.display='none'; 
div.style.height = '1px'; 
div.id = 'slideDiv' + divCounter; 
div.className = 'slideMenuDiv' + currentDepth; 
inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL> 
div.appendChild(inputObj); // Appending <UL> to the div 
var menuItem = inputObj.getElementsByTagName('LI')[0]; 
var subCounter = 1; 
var addClass = ''; 
while(menuItem){ 
if(menuItem.tagName=='LI'){ 
var subID = "subMenuItem_"+divCounter+"_"+subCounter; 
menuItem.id = subID; 
var aTag = menuItem.getElementsByTagName('A')[0]; 
if(initSubMenuId == subID){ 
aTag.className = 'slMenuItem_depth'+currentDepth + " BGc5c5c5" ;       
menuItem.className=menuItem.className + " BGc5c5c5";    
}else{aTag.className='slMenuItem_depth'+currentDepth;} 

var subUl = menuItem.getElementsByTagName('UL'); 
if(subUl.length>0){ 
initSubItems(subUl[0],currentDepth+1); 
} 
aTag.onclick = showSubMenu;   
subCounter++; 
} 

menuItem = menuItem.nextSibling; 
} 
} 

function initSlideDownMenu() 
{ 
dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu'); 
dhtmlgoodies_slmenuObj.style.visibility='visible'; 
var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0]; 
var mainMenuItem = mainUl.getElementsByTagName('LI')[0]; 
mainItemCounter = 1; 
while(mainMenuItem){ 
if(mainMenuItem.tagName=='LI'){ 
var aTag = mainMenuItem.getElementsByTagName('A')[0]; 
aTag.className='slMenuItem_depth1'; 
var subUl = mainMenuItem.getElementsByTagName('UL'); 
if(subUl.length>0){ 
mainMenuItem.id = 'mainMenuItem' + mainItemCounter; 
initSubItems(subUl[0],2); 
aTag.onclick = showSubMenu; 
mainItemCounter++; 
}else{ 
mainMenuItem.id = 'mainMenuItem' + mainItemCounter; 
divCounter++; 
mainItemCounter++; 

} 
} 
mainMenuItem = mainMenuItem.nextSibling; 
} 

if(location.search.indexOf('mainMenuItemToSlide')>=0){ 
var items = location.search.split('&'); 
for(var no=0;no<items.length;no++){ 
if(items[no].indexOf('mainMenuItemToSlide')>=0){ 
values = items[no].split('='); 
showSubMenu(false,document.getElementById('mainMenuItem' + values[1])); 
initMenuIdToExpand = false; 
} 
} 
}else if(expandFirstItemAutomatically>0 ){ 
if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){ 
showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically)); 
initMenuIdToExpand = false; 
} 
} 


if(expandMenuItemByUrl) 
{ 
var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A'); 
var currentLocation = location.pathname; 
//console.log(currentLocation); 
for(var no=0;no<aTags.length;no++){ 
var hrefToCheckOn = aTags[no].href; 
console.log(hrefToCheckOn); 
if(hrefToCheckOn.indexOf(currentLocation)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){ 
initMenuIdToExpand = false; 
var obj = aTags[no].parentNode; 
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){ 
if(obj.tagName=='LI'){ 
var subUl = obj.getElementsByTagName('UL'); 
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true; 
if(subUl.length>0){ 
objectsToExpand.unshift(obj); 
} 
} 
obj = obj.parentNode; 
} 
showSubMenu(false,objectsToExpand[0]); 
break; 
} 
} 
} 

if(initMenuIdToExpand) 
{ 
objectsToExpand = new Array(); 
var obj = document.getElementById(initMenuIdToExpand) 
while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){ 
if(obj.tagName=='LI'){ 
var subUl = obj.getElementsByTagName('UL'); 
if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true; 
if(subUl.length>0){ 
objectsToExpand.unshift(obj); 
} 
} 
obj = obj.parentNode; 
} 

showSubMenu(false,objectsToExpand[0]); 

} 

} 

</script>

я скачал этот код для слайда вверх и вниз меню onclick- он работает правильно, на клик главного меню она показывает подменит и OnClick другого меню его шкуры предыдущей и показать текущее подменят но я хочу добавить, что при щелчке на одном и том же меню дважды он должен скрывать свои подменю, значит, сначала нажмите, чтобы он открыл нам подменю, а при следующем щелчке на том же меню он должен скрывать свои подменю, которые я не могу сделать. любые предложения, пожалуйста.Slideup и вниз OnClick выпадающего меню

источник

2013-10-28 BeingShashi

Постарайтесь выяснить, как проверить 2º щелчок по элементу. например:

how to find out second click on a button

Удачи!

источник

2013-10-28 09:48:53 Alberto

В зависимости от вашего уровня мастерства я бы отказался от загруженного кода. Кажется, что слишком сложно учитывать конфигурацию. Если вам не нужно использовать это в разных местах по-разному. Я бы обработал все состояния выпадающего списка с помощью css и классов и обработал делегирование события click с помощью jquery. Например, вы можете иметь класс «.pen-drop-down» и применить его к любому элементу, который нажал. Если вы хотите, чтобы только один снимок был открыт одновременно, я бы очистил открытые капли вниз, прежде чем открывать новый. Вы можете сделать это легко, выполнив:

$('#drop-down-menu li').removeClass('open-drop-down');

Для закрытия открытой вкладки меню вы можете сделать проверку в верхней части щелкните событие, как:

if ($(this).is('.open-drop-down') { 
    $(this).removeClass('open-drop-down'); 
    return; 
}

Это будет проверить, если элемент, который вы нажали on ($ (this)) имеет класс «open-drop-down», он удалит этот класс и вернется, чтобы он не выполнил оставшуюся часть функции.

Пример функции базовой:

$('#drop-down-menu').on('click', 'li', function(e) { 
    e.preventDefault() 
    if ($(this).is('.open-drop-down')) { 
     $(this).removeClass('open-drop-down'); 
     return; 
    } 
    $('#drop-down-menu li').removeClass('open-drop-down'); 
    $(this).addClass('open-drop-down') 
});

Это предполагает, что все визуальные аспекты ручки в CSS. при необходимости можно добавить анимацию, используя второй параметр в функциях удаления и добавления класса.

Это только мое мнение, но для выпадающего этого много кода jquery должно быть достаточно.

источник

2013-10-28 20:34:01

Slideup и вниз OnClick выпадающего меню

ответ

Смежные вопросы