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('-');

  });
});

これは完全に正常に機能します！次に、メインメニュー（.jquerycssmenu ul li a）のJQueryに入力しようとしました。次のようにしました。

$(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の問題を修正して、メインメニューのリンクがサブメニューのリンクに影響を与えないようにするにはどうすればよいですか。

簡単なメモ： CSS のコードに影響を与えることなく、コードを正常に編集できます。コードをJQueryに適用するのは、物事が混乱するときです。ul li aul li ul li a

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>

その中に2つのタグがあるため、セレクターul liにはこのマークアップに2つの一致があります。ただし、直接の子のみを選択するには、を使用できます。つまり、最初の要素のみを選択し、2番目の要素はの直接の子ではないため2番目の要素は選択しません。<li><ul>>ul > li<li><ul>

于 2012-12-02T23:57:59.193 に答える
2

p spanは、直接の子孫であるかどうかに関係なく、要素span内にある要素を検索することを意味します。p

そのため、は次のようにネストされul li aたaにも影響を与えます。aul > li > ul > li > a

子セレクターを使用する必要がありますul > li > a。

于 2012-12-02T23:58:36.617 に答える
1

セレクターとは、 ul li a「のa子孫であるanの子孫であるanの子孫である。anliがの子孫である場合はulいつでも適用されます。直接の子のみを選択するには、演算子を使用します。Soand 、またはそのようなもの。aliul>.jquerycssmenu > ul > li > a.jquerycssmenu > ul > li > ul > li > a

于 2012-12-03T00:00:11.417 に答える