javascript - ul li a affecting ul li ul li a

Question

如果标题不好理解，我来解释一下...

我有一个 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 代码，而不会影响 CSS 中的 ul li ul li a 代码。就在我将代码应用到 JQuery 时，事情变得一团糟。

Answer 1

你应该使用这个:

`.jquerycssmenu > ul > li > a`

代替这个:

`.jquerycssmenu ul li a` 

这里是 CSS 选择器的解释:
What does the ">" (greater-than sign) CSS selector mean?