Print Page - Menubutton Hide Event

Hi Everyone,

I'm having an issue with the hideEvent in my menubutton. If I move the cursor out of the top button, the menu stays and only closes when I click outside the menu. As soon as I move the cursor over any of the sub-menu items and then move the mouse cursor out of the menu, it closes the menu immediately.

Code:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Test Menu</title>
   <link class="jeasycss" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
   <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',hideEvent:'click'">Menu</a>
   <div id="mm1" style="width:150px;">
      <div>Option 1</div>
      <div>Option 2</div>
      <div>Option 3</div>
   </div>
</body>
</html>

Please see https://jsfiddle.net/uoj8awrx/

I would prefer to use the 'duration' property, but this property is used for both opening and closing the menu. Is there a way to extend the menubutton to have a close duration?

Thanks a lot for the help.
Kevin

Try this code to set the menu duration property value.

Code:

<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',hideEvent1:'click'">Menu</a>
<div id="mm1" style="width:150px;">
  <div>Option 1</div>
  <div>Option 2</div>
  <div>Option 3</div>
</div>
<script type="text/javascript">
	$(function(){
		$('#mm1').menu('options').duration = 1000;
	})
</script>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Kevin on September 14, 2020, 10:21:18 AM