0

選択した項目を強調表示し、別の項目がクリックされて強調表示されたら強調表示を解除する jquery UI メニューがあります。メニューで選択イベントが検出されたらcssの背景色プロパティを変更するところまで行きましたが、それが起こる前に、すべてのアイテムをチェックして、以前の選択がまだ強調表示されているかどうかを確認し、強調表示を解除してから、新しい選択を強調表示します.

 <script>
     $(function(){
        $(".menu").menu({

          //detect select event 

            select:function( event, ui ) {

            //highlight the selected menu item

                ui.item.css('background-color','red');

                }

               });

          });
    </script>

//The Menu

 <ul class="menu">
                <li><a href="#"><h2> Fitness</h2></a></li>
            <li><a href="#"><h2> Literature</h2></a></li>
                <li><a href="#"><h2>Music</h2></a></li>
                <li><a href="#"><h2>Fine Art</h2></a></li>         
            <li><a href="#"><h2>Food</h2></a></li>
</ul>
4

1 に答える 1

1

スタイルを直接設定するのではなく、css クラスを作成してクラスを追加/削除することをお勧めします。

$(document).ready(function () {
  $(".menu").menu({
    select: function (event, ui) {
      $('.selected', this).removeClass('selected');
      ui.item.addClass('selected');
    }
  });
});

CSS:

.menu .ui-menu-item.selected { 
  background-color : red;
}

アイテムにフォーカスがある場合やサブメニューがあり、アクティブな場合でも、赤のままにしたい場合は、これを追加します。

.menu .ui-menu-item.selected > .ui-state-focus,
.menu .ui-menu-item.selected > .ui-state-active {
  background-color : red ;
  background-image: none;
}

意味のある方法で動作させるためにサブメニューを用意する予定がある場合は、これをさらに微調整する必要があるかもしれません。

サブメニューなし: http://jsfiddle.net/sgearhart2/Fba6L/4/

サブメニューあり: http://jsfiddle.net/sgearhart2/Fba6L/5/

于 2013-03-30T02:54:58.197 に答える