Question

我有一个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>

Answer 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/

如何在Jquery菜单UI中取消选中菜单项并突出显示另一个新项目

1 个答案: