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;
}

You may need to tweek this some more if you plan to have submenus to get it to work in a way that makes sense.

Without submenus: http://jsfiddle.net/sgearhart2/Fba6L/4/

With submenus: http://jsfiddle.net/sgearhart2/Fba6L/5/

于 2013-03-30T02:54:58.197 回答