html tree bootstrap tree-view input 悬停展开下拉菜单树效果

bootstrap-treeview 做的tree ，实现点击展开树，选中树效果。

html：

<div id="area_tree_div">
    <input type="text" id="area_input" name="area_input" class="form-control" value=""   placeholder="地区名称"/>
    <div id="treeview" style="display: none;"></div>
</div>
           

js:

 function showAreaTreeView() {
     $("#treeview").show();
     if($("#treeview").innerHeight()>10){
      return;
     }
     var areaTreeData = [{
       "id": 1,
       "text": "全部区域",
       "nodes": [{
         "id": 11,
         "text": "山东省",
         "nodes": [{
           "id": 111,
           "text": "青岛市",
           "nodes": [{
             "id": 1111,
             "text": "高新区"
           }, {
             "id": 1112,
             "text": "市南区"
           }, {
             "id": 1113,
             "text": "市北区"
           }, {
             "id": 1114,
             "text": "李沧区"
           }, {
             "id": 1115,
             "text": "崂山区"
           }, {
             "id": 1116,
             "text": "黄岛区"
           }, {
             "id": 1117,
             "text": "即墨区"
           }, {
             "id": 1118,
             "text": "平度市"
           }, {
             "id": 1119,
             "text": "胶州市"
           }]
         }]
       }, {
         "id": 12,
         "text": "青海省",
         "nodes": [{
           "id": 121,
           "text": "西宁市"
         }, {
           "id": 122,
           "text": "海东市"
         }, {
           "id": 123,
           "text": "海北藏族自治州"
         }, {
           "id": 124,
           "text": "玉树藏族自治州"
         }]
       }, {
         "id": 13,
         "text": "新疆维吾尔自治区",
         "nodes": [{
           "id": 131,
           "text": "乌鲁木齐市"
         }, {
           "id": 132,
           "text": "克拉玛依市"
         }, {
           "id": 133,
           "text": "吐鲁番市"
         }, {
           "id": 134,
           "text": "哈密市"
         }]
       }, {
         "id": 14,
         "text": "内蒙古藏族自治区",
         "nodes": [{
           "id": 141,
           "text": "呼和浩特市"
         }, {
           "id": 142,
           "text": "包头市"
         }, {
           "id": 143,
           "text": "赤峰市"
         }]
       }]
     }];
     var options = {
       bootstrap2: false,
       showTags: false,
       showCheckbox: false,
       data: areaTreeData,
       onNodeSelected: function(event, data) {
         $("#area_input").val(data.text);
         $("#treeview").hide();
       }
     };
     $('#treeview').treeview(options);
   }

   $("#area_input").click(function() {
     if (document.getElementById("treeview").style.display == "none") {
       showAreaTreeView();
     } else {
       $("#treeview").hide();
     }
   });
   $("#area_tree_div").hover(function() {
     /* Stuff to do when the mouse enters the element */
     showAreaTreeView();
   }, function() {
     $("#treeview").hide();
     /* Stuff to do when the mouse leaves the element */
   });

可以了，也就是包裹input和tree的div  添加悬停事件监听。