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 回答