堆栈内存溢出
  繁体   English   中英

上下滑动onclick下拉菜单

[英]Slideup and down onclick dropdown menu

 原文  2013-10-28 05:02:27  2   2    javascript/ jquery

问题描述

<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，它会隐藏上一个菜单并显示当前子菜单，但是我想在单击同一菜单时添加它两次它应该隐藏其子菜单，是指首先单击它应该打开我们的子菜单，然后在同一菜单上单击下一步，它应该隐藏其子菜单，而我无法执行此操作。 任何建议，请。

2 个解决方案

解决方案1
 0  2013-10-28 09:48:53

尝试找出如何检查2º单击元素。 例如：

如何找出第二次点击按钮

祝好运 ！

解决方案2
 0  2013-10-28 20:34:01

根据您的技术水平，我将报废下载的代码。 解决配置问题似乎过于复杂。 如果您不需要以不同的方式在多个位置使用它。 我将使用css和class处理下拉列表的所有状态，并使用jquery处理click事件委托。 例如，您可以具有“ .open-drop-down”类，并将其应用于任何单击的元素。 如果您一次只想打开一个下拉菜单，那么在打开新的下拉菜单之前，请先清除打开的下拉菜单。 您可以通过执行以下操作轻松完成此操作： 

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

要关闭打开的菜单标签，您可以在点击事件的顶部进行检查，例如： 

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

这将检查您单击的元素（$（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中处理。 如果需要，可以通过在remove和add类函数中使用第二个参数来添加动画。

这只是我的意见，但对于下拉列表来说，足够多的jquery代码就足够了。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用slideUp（）和slideDown（）的jQuery下拉菜单 javascript下拉菜单onclick CSS下拉菜单onclick jQuery下拉菜单onclick 隐藏下拉菜单 OnClick OnClick -Dropdown菜单 Javascript onclick下拉菜单 jQuery Dropdown .slideUp / Down适用于Chrome，Bugs on Firefox onClick下拉菜单响应式网站 引导菜单-下拉onclick不会悬停
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM