如果标题难以理解,让我解释一下...
我有一个 css / jquery 切换菜单。当你按“+”号时,它会变大,当你按“-”号时,它会变小。我在切换/单击时更改了几个元素的填充、边距和高度。菜单顶部充满了链接,然后当您将鼠标悬停在链接上时,它会显示更多子链接。顶部的主要链接使用 css 代码:
/*Top level menu link items style*/
.jquerycssmenu ul li a{
display: block;
background: none; /*background of tabs (default state)*/
padding: 5px 18px 32px 18px;
margin-right: 3px; /*spacing between tabs*/
color:#fff;
text-decoration: none;
}
子菜单使用这个 CSS 代码:
/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
font: normal 13px Verdana;
width: 320px; /*width of sub menus*/
height:60px;
background: black;
color: white;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid #2c2c2c;
padding:20px 0px 0 20px;
}
我已经设置了 JQuery,所以子菜单填充通过切换缩小......我这样做了:
$(document).ready(function(){
$('.gh-gallink').toggle(
function() {
$('.jquerycssmenu ul li ul li a').animate({
height: "40px",
padding: "10px 0px 0 20px"
}, 100);
$(this).text('+');
},
function() {
$('.jquerycssmenu ul li ul li a').animate({
height: "60px",
padding: "20px 0px 0 20px"
}, 100);
$(this).text('-');
});
});
这工作得很好!然后我尝试在 JQuery 中输入主菜单 (.jquerycssmenu ul li a) 我这样做了:
$(document).ready(function(){
$('.gh-gallink').toggle(
function() {
$('.jquerycssmenu ul li ul li a').animate({
height: "40px",
padding: "10px 0px 0 20px"
}, 100);
$('.jquerycssmenu ul li a').animate({
paddingBottom: "8px"
}, 100);
$(this).text('+');
},
function() {
$('.jquerycssmenu ul li ul li a').animate({
height: "60px",
padding: "20px 0px 0 20px"
}, 100);
$('.jquerycssmenu ul li a').animate({
paddingBottom: "32px"
}, 100);
$(this).text('-');
});
});
出于某种原因,ul li a
(主菜单)会影响ul li ul li a
(子菜单)。切换菜单后,padding-bottom
主菜单的子菜单的 ..32px
什么时候变大8px
什么时候变小.. 什么时候padding-bottom
应该0px
变大0px
什么时候变小,就像上面列出的一样。
为什么ul li a
(主菜单链接)会影响ul li ul li a
(子菜单链接)?以及如何解决这个 CSS / JQuery 问题,以便主菜单链接不会影响子菜单链接。
只是一个简短的说明:
我可以成功地编辑ul li a
代码而不会影响ul li ul li a
代码..在 CSS 中。只是当我将代码应用到 JQuery 时,事情就搞砸了。