从选择菜单中的选项隐藏

我想'prependTo'“选择菜单”DIVs。菜单在DIV上的'鼠标悬停'上'prependingTo'。在这个菜单中是有一些选项的SELECT。但是，当我想选择其他选项时，选择菜单中的选项是隐藏的。这是行不通的。为什么？从选择菜单中的选项隐藏

Example

HTML：

<div id="add" style='width:200px; background:cyan;'> + + + + + + + + + </div> 
<div id="menu"> 
    <div style="display:inline-block;"> 
     <button>1</button> 
     <button>2</button> 
    </div> 
    <div style="display:inline-block;"> 
     <select id="fs"> 
      <option value="Arial">Arial</option> 
      <option value="Verdana ">Verdana </option> 
      <option value="Impact ">Impact </option> 
      <option value="Comic Sans MS">Comic Sans MS</option> 
     </select> 
    </div> 

</div> 
<br> 
<div id="cont"> 
    <div id="container"> 
     <div id="divA">1111<br><br>&nbsp;</div> 
     <br> 
     <div id="divB">2222<br><br>&nbsp;</div> 
     <br> 
     <div id="divC">33333<br><br>&nbsp;</div> 
     <br> 
     <div id="divD"><br>&nbsp;</div> 
    </div> 
</div>

CSS：

#container{ padding: 100px; } 
    #menu{ font-size: 10px; 
     position: absolute; 
     background-color: none; 
     letter-spacing: 0px; 
    } 
    #divA{ background-color: yellow; } 
    #divB{ background-color: red; } 
    .divB{ background-color: red; } 
    #divC{ background-color: cyan; } 
    #divD{ background-color: brown; }

jQuery的：

$("#add").live("click", function() { 
    var timestamp = Date.now(); 
    $("#container").prepend('<div class="divB" id="'+timestamp+'">'+timestamp+'<br><br></div>'); 
    }); 
    $("#container div").live({ 
    mouseover: function() { 
     if($(this).closest("#menu").length){ return; } 
     $('#menu').prependTo($(this)); 
    } 
    });

来源

2012-09-24 Patrik

尝试这样

$("#container").bind({ 
    mouseover: function() { 
     if($(this).closest("#menu").length){ 
      return; 
     } 
     $('#menu').prependTo(this); 
     $("#container").unbind('mouseover');  
    } 
});

来源

2012-09-24 10:12:19 Gautam3164

谢谢你帮助我，但我更新了我的代码和示例。有一些动态添加的DIV。你的解决方案适用于那些。然后脚本停止。 – Patrik

您可以使用find方法而不是closest，closest选择元素的最接近的父母，你要查找的元素的后代，你的if语句总是返回false，还要注意live已弃用，您可以改为使用on。

$(document).on({ 
     mouseover: function(e) { 
      if($(this).find("#menu").length){ return; } 
      // or if ($('#menu', this).length){ return; } 
      $('#menu').prependTo($(this)); 

     } 
}, "#container div");

http://jsfiddle.net/h7y3Z/

来源

2012-09-24 10:00:35 undefined

谢谢。这个工作正常。在这种情况下，“onclick”比“live”更好？ – Patrik

@Patrik是的，如果你想委托事件，'on'比'live'好得多，'live'也被弃用，在将来的jQuery版本中，它将被从API中移除。 – undefined

但是，当我插入动态菜单中的另一个DIV时，“onclick”不起作用.... :( http://jsfiddle.net/ynternet/h7y3Z/1/ – Patrik

从选择菜单中的选项隐藏

回答

相关问题