创建类似Photoshop的按钮，在长按后打开菜单

Question

我想创建一个类似Photoshop的按钮，即一个按钮：

• 有一个＆＃34;默认＆＃34;州。单击此按钮即可执行X。
• 长按/按下可打开下拉菜单。选择其他任何东西都会成为（单击）默认值。

我到目前为止所处的位置：https://jsfiddle.net/25mc3mtz/2/

＆＃13;

＆＃13;

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="btn-group">
  <a class="btn btn-large" id="myDropdown" href="#" onmousedown="func()" onmouseup="revert()">
    <i class="icon-file">&nbsp;</i>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Menu Item 1</a>
    </li>
    <li><a href="#">Menu Item 2</a>
    </li>
  </ul>
</div>

<script>
  var timer;
  var isTrue = false;

  function func() {
    $("#myDropdown").attr('data-toggle', '');
    $("#myDropdown").removeClass('dropdown-toggle');
    isTrue = true;
    timer = setTimeout(function() {
      showDropDown();
    }, 1000);
  }

  function showDropDown() {
    if (timer)
      clearTimeout(timer);

    if (isTrue) {
      $("#myDropdown").attr('data-toggle', 'dropdown');
      $("#myDropdown").addClass('dropdown-toggle');
      $("a .dropdown-toggle").trigger('click');
    }
  }

  function revert() {
    isTrue = false;
  }
</script>

＆＃13;

＆＃13;

＆＃13;

我想知道：

1. 我的解决方案是否正确？我觉得它有点＆＃34;脏＆＃34; ...有关如何改进它的任何建议吗？
2. 如何在一秒钟后立即显示下拉列表，而不是仅在我释放鼠标按钮后？我不确定如何实现它。

提前致谢！