1

次のメニュー構造があります。

<ul class="menu">
  <li class="first leaf"><a href="#" title="" class="active">Home</a></li>
  <li class="expanded"><a href="#" title="Products">Products</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 1</a></li>
      <li class="leaf"><a href="#">Product 2</a></li>
      <li class="leaf"><a href="#">Product 3</a></li>
      <li class="last leaf"><a href="#">Product 4</a></li>
    </ul
  <li>
  <li class="expanded"><a href="#" title="Products">Products Level 2</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 5</a></li>
      <li class="leaf"><a href="#">Product 6</a></li>
    </ul>
  <li>
</ul>

私がやろうとしているのは、項目がホバーされたときに、親メニュー項目を変更しProduct 1たいということです。Products

子に基づいて親をターゲットにしようとすることで、これを行うために CSS を調べましたが、それはできないようです。

これはjQueryで実行できますか?

ありがとう

4

6 に答える 6

0

最初の ul に ID を追加してから、次のようにすることをお勧めします。

$(".menu .menu li a").hover(
    function() {
        $(this).parents("#root > li").addClass('test');
    },
    function() {
        $(this).parents("#root > li").removeClass('test');
    }     
);

jsFiddleで

于 2012-05-29T18:55:15.737 に答える
0 
$('.menu > .expanded > .menu > li > a').on('hover', function(e) {
    var li = $(this).closest('.expanded').find('a:first');
    if (e.type == 'mouseenter') {
        li.css('background', '#f00');
    } else {
        li.css('background', '#fff');
    }
});

デモ

また

$('li.leaf').on('hover', function(e) {
   var li = $(this).closest('.expanded').find('a:first');
   if(e.type == 'mouseenter') li.css('background', '#fff');
   else li.css('background', '#f00');
});

デモ

あなたの編集によると

HTML マークアップに問題があります。解決してください。

私のコードは新しいメイクでも機能していると思います。

こちらをご覧ください

于 2012-05-29T18:33:13.993 に答える
0 
$("a:contains('Product 1')").hover(function(){
   $('[title="Products"]').addClass('changed');
})

http://jsfiddle.net/ULALG/

于 2012-05-29T18:39:39.627 に答える
0

これを試して：

$('li.first').hover(function() {
    $(this).closest('li.expanded').children('a').css('font-weight', 'bold');
}, function() {
    $(this).closest('li.expanded').children('a').css('font-weight', 'normal');
});​

jsFiddle の例。

この例では、商品 1 のリスト項目にカーソルを合わせると商品メニューが太字になりますが、代わりに必要なことは何でもできます。

于 2012-05-29T18:42:03.560 に答える
0

それはあなたがそれをどのように変えたいかによって異なりますか？

編集: 2 li サブメニューのDEMOを更新

CSSだけで：

ul.menu li { display: inline-block; margin: 3px;  padding: 5px; vertical-align: top;}

ul.menu li:hover { font-weight: bold; background-color: green; }

ul.menu, ul.menu li:hover ul, ul.menu li:hover ul.menu li { font-weight: normal; background-color: white; }
ul.menu li:hover ul.menu li:hover { font-weight: bold; background-color: green; }

デモ- フォントと背景

デモ- フォントのみ

于 2012-05-29T18:47:55.033 に答える
0

このようなことを意味していましたか？

http://jsfiddle.net/KZdkV/16/

$('.hoverchange').hover(function() {
    $('.expanded').replaceWith('<a href="#" title="NewStuff">NewStuff</a>');
});​

私はあなたのクラスを少し変更しました。違いはリンク先を見てください。

于 2012-05-29T18:48:36.533 に答える