Question

我最近开始使用jQuery和CSS垂直下拉菜单。当我在我的网站上有它，并且我点击父'ul'时，菜单下拉以显示子项目，但整个子区域变黑。我似乎无法保持子菜单项以保持透明度，以便可以单击它们。有什么建议？

这是我的jQuery代码：

$( document ).ready(function() {
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');   
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;   
}       
});
});

这是我的CSS代码：

/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Lato', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
padding: 6px 15px;
}
#cssmenu {
width: 200px;
}
#cssmenu > ul > li {
cursor: pointer;
background: #000;
border-bottom: 1px solid #797a80;
}
#cssmenu > ul > li:last-child {
border-bottom: 1px solid #3e3d3c;
}
#cssmenu > ul > li > a {
font-size: 13px;
display: block;
color: #0600a6; /* this is the txt color of the menu */
text-shadow: 0 1px 1px #000;
background: #ffffff; /* this is the background color of the menu */
background: -moz-linear-gradient(#6a6b72 0%, #4c4e53 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6a6b72),       color-stop(100%, #4c4e53));
background: -webkit-linear-gradient(#6a6b72 0%, #4c4e53 100%);
background: linear-gradient(#6a6b72 0%, #4c4e53 100%);
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
background: #2b3c94;  /* this is the clicked parent color */
background: -moz-linear-gradient(#a5ce27 0%, #709400 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5ce27),  color-stop(100%, #709400));
background: -webkit-linear-gradient(#a5ce27 0%, #709400 100%);
background: linear-gradient(#a5ce27 0%, #709400 100%);
color: #ffffff; /* this is the clicked parent txt color */
text-shadow: 0 1px 1px #a5ce27;
}
#cssmenu > ul > li.has-sub > a:after {
content: '';
position: absolute;
top: 10px;
right: 10px;
border: 5px solid transparent;
border-left: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub.active > a:after {
right: 14px;
top: 12px;
border: 5px solid transparent;
border-top: 5px solid #4e5800; 
}  
/* Sub menu */
#cssmenu ul ul {
padding: 0;
display: none;
}
#cssmenu ul ul a {
background: #efefef;
display: block;
color: #797979;
font-size: 13px;
}
#cssmenu ul ul li {
border-bottom: 1px solid #c9c9c9;}

#cssmenu ul ul li.odd a {
background: #e5e5e5;
}
#cssmenu ul ul li:last-child {
border: none;
}

这是我的HTML

<div id='cssmenu'>
<ul>
<li class='active'><a href='../index.html'><span><-- Back Home</span></a></li>
<li class='has-sub'><a href='#'><span>Quick Links</span></a>
  <ul>
     <li><a href='epad/epad.html' target="display"><span>ePad</span></a></li>
     <li><a href='printer stuff/indiana.printers.html' target="display"><span>Printers</span></a></li>
     <li class='last'><a href='session resets/session.resets.html' target="display"> <span>Session Resets</span></a></li>
  </ul>
</li>
<li class='has-sub'><a href='#'><span>Issues</span></a>
  <ul>
     <li><a href='24.hour.wait.html' target="display"><span>24 Hour Wait</span></a>   </li>
     <li><a href='cashed.vouchers.html' target="display"><span>Cashed Vouchers</span></a></li>
     <li><a href='dummy.checks.html' target="display"><span>Dummy Checks</span></a></li>
     <li><a href='duplicate.entry.indiana.html' target="display"> <span>Duplicate Entry</span></a></li>
     <li><a href='first or second login.html' target="display"><span>First & Second Login</span></a></li>
     <li><a href='#' target="display"><span>About</span></a></li>
     <li class='last'><a href='#'><span>Location</span></a></li>
   </ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Answer 1

如果点击后删除“有效”类，则会手动将“有效”类添加到第一个li元素父ul？

$("#cssmenu ul li").first().addClass('active');

Here is a Fiddle to demonstrate

我没有看到任何其他方式失去透明度，如果仍然存在问题，请告诉我您正在使用的浏览器版本。

单击jQuery下拉菜单变黑

1 个答案: