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小时... {{1} }大于padding-bottom，0px小时如上所列。

为什么0px（主菜单链接）会影响ul li a（子菜单链接）？如何修复此CSS / JQuery问题，以便主菜单链接不会影响子菜单链接。

快速说明一下： 我可以在不影响CSS中的ul li ul li a代码的情况下，对ul li a代码进行粗略编辑。就在我把代码应用到JQuery的时候就是事情搞乱了。

Answer 1

你应该用这个：

`.jquerycssmenu > ul > li > a`

而不是：

`.jquerycssmenu ul li a`

以下是> css选择器的说明：
What does the ">" (greater-than sign) CSS selector mean?

Answer 2

选择器ul li a匹配<a>标记中<li>标记中任意深度的任何<ul>标记 - 即使例如<li>是实际上位于外部<ol>内的<ul>标记内：

<ul>
    <li>
        <ol>
            <li><a>Foo</a></li>
        </ol>
    </li>
</ul>

选择器ul li有两个匹配此标记，因为<li>内有两个<ul>标记。但是，要仅选择直接儿童，您可以使用>，即ul > li将仅选择第一个<li>元素而不选择第二个元素，因为该元素不是<ul>的直接子元素{1}}。

Answer 3

p span表示查找位于span元素内的p元素，无论它是否是直接后代。

这就是为什么ul li a也会影响嵌套的a：ul > li > ul > li > a。

您应该使用子选择器ul > li > a。

Answer 4

选择器ul li a表示“a是li的后代，ul的后代是a的后代。只要li有ul >和.jquerycssmenu > ul > li > a作为祖先，它将适用。要仅选择直接子项，请使用.jquerycssmenu > ul > li > ul > li > a运算符。所以{{1}}和{{1}}或类似的东西

ul li影响ul li ul li a

4 个答案: