jQuery UI菜单refresh()方法

jQuery UI菜单（menu）是jQuery UI核心库的一部分，它提供了一种方便的方式来创建和管理菜单。其中refresh()方法是jQuery UI菜单提供的一个用于刷新菜单的方法。

refresh()方法的用途

refresh()方法用于刷新菜单，重新计算和应用菜单项的布局和样式。当你对菜单的内容或者选项做了修改之后，可以调用refresh()方法来更新菜单的展示效果。

refresh()方法的语法

$( ".selector" ).menu( "refresh" );

其中，".selector"是你要刷新的菜单的选择器。例如，如果你的菜单是通过HTML元素创建的，那么可以通过以下方式选择到它：

<ul id="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>

$( "#menu" ).menu(); // 初始化菜单
$( "#menu" ).menu( "refresh" ); // 刷新菜单

示例1

我们可以通过添加或删除菜单项来演示refresh()方法的使用：

<ul id="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>
<button id="add-item">添加菜单项</button>
<button id="remove-item">删除菜单项</button>

$( "#menu" ).menu();
$( "#add-item" ).on( "click", function() {
  $( "#menu" ).append( '<li><a href="#">菜单项4</a></li>' );
  $( "#menu" ).menu( "refresh" );
});
$( "#remove-item" ).on( "click", function() {
  $( "#menu li:last-child" ).remove();
  $( "#menu" ).menu( "refresh" );
});

以上代码中，当点击“添加菜单项”按钮时，会先添加一个新的菜单项到菜单中，然后调用refresh()方法来刷新菜单；当点击“删除菜单项”按钮时，会先删除最后一个菜单项，然后调用refresh()方法来刷新菜单。

示例2

refresh()方法还可以在设置菜单的选项时使用，以便能够动态更新和应用这些选项。

<ul id="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>
<button id="toggle-icon">切换图标</button>

$( "#menu" ).menu({
  icons: {
    submenu: "ui-icon-circle-triangle-s"
  }
});
$( "#toggle-icon" ).on( "click", function() {
  $( "#menu" ).menu( "option", "icons.submenu", "ui-icon-caret-1-s" );
  $( "#menu" ).menu( "refresh" );
});

以上代码中，当菜单创建时，我们设置了菜单的图标为"ui-icon-circle-triangle-s"。当点击“切换图标”按钮时，我们通过调用option()方法来更新菜单的图标选项，并通过refresh()方法来重新计算和应用菜单的布局和样式。