0

如果标题难以理解，让我解释一下...

我有一个 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 时，事情就搞砸了。

4

4 回答 4

3

你应该使用这个：

`.jquerycssmenu > ul > li > a`

而不是这个：

`.jquerycssmenu ul li a`

下面是对>css 选择器的解释：
“>”（大于号）CSS 选择器是什么意思？

于 2012-12-02T23:57:23.837 回答
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>.

于 2012-12-02T23:57:59.193 回答
2

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

这就是为什么，ul li a也影响a像这样嵌套的一个：ul > li > ul > li > a.

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

于 2012-12-02T23:58:36.617 回答
1

选择器的ul li a意思是“ana是 an 的后代，li它是 a 的后代ul。只要 ana有一个liandul作为祖先，它就会应用。要仅选择直接子代，请使用>运算符。所以.jquerycssmenu > ul > li > aand .jquerycssmenu > ul > li > ul > li > a，或类似的东西。

于 2012-12-03T00:00:11.417 回答