0

创建一个显示动态生成的项目列表的小部件。每个项目都有 [img] 单击时会显示一个悬停菜单栏以删除、保存、编辑该项目。我被困在如何使用 CSS 让它悬停在 img 的底部而不影响 img 所在的 div？这是一个可滚动的窗口，因此当项目接近滚动区域内的底部时，菜单栏必须始终位于顶部。任何建议表示赞赏。

请参阅jsFiddle 示例以查看它的实际效果

当为每个列表元素单击 [img] 时，我的列表小部件应该浮动菜单：

<div class="scroll">
<ul class="ul1">
  <li>
    <div class="divtop">
        <a class="a1" href="javascript:void(0)">[img]</a>
         <ul class="float-menu">
             <li><a href="javascript:void(0)">X</a></li>
            <li><a href="javascript:void(0)">Y</a></li>
             <li><a href="javascript:void(0)">Z</a></li>
        </ul>          
        <div class="divsub">blah</div>
     </div>
</li>
 <li>
    <div class="divtop">
        <a class="a1" href="javascript:void(0)">[img]</a>
         <ul class="float-menu">
             <li><a href="javascript:void(0)">X</a></li>
            <li><a href="javascript:void(0)">Y</a></li>
             <li><a href="javascript:void(0)">Z</a></li>
        </ul>          
        <div class="divsub">blah</div>
    </div>
</li>

</ul>
</div>

//jquery code
/* by default float menu is hidden */
 $('.scroll ul li div ul').hide();

 $('.a1').click(function() {
      $('.a1').next('.float-menu').show();   
    });

  $('.a1').mouseout(function(){
   $('.a1').next('.float-menu').hide();
 });

//CSS

 div.scroll
 {
 background-color:lightgray;
 width:450px;
 height:120px;
 overflow-y:scroll;
 }

 .a1 {
float:left;  
 }

 .divtop {
  border:1px solid darkgray;
 }
 .divsub {
  margin-right:15px;
 }

 .ul1 {
 list-style-type:none;
  }

 .ul1 li {
  padding-bottom:15px;
 }
 .float-menu {
 list-style-type:none;
  width:15px;  
 }

 .float-menu li {
  padding:0px;   
   border: 1px solid pink;
 }
4

2 回答 2

1

<li>这是一个与外部高度变化有关的工作小提琴。

工作小提琴

CSS 更改

.ul1 > li {
    height: 20px;
}

.float-menu {
    list-style-type:none;
    width:15px;
    background-color: white; /* just to show where the menu is */
    position: relative; /* displays over the top of other text */
    margin-left: 40px;  /* pushes the menu over, not sure if that is what you wanted*/
}

脚本更改

/* by default float menu is hidden */
$('.scroll ul li div ul').hide();

$('.a1').click(function () {
    $(this).next('.float-menu').show();  // Use $(this) to get current clicked element
});

$('.a1').mouseout(function () {
    $(this).next('.float-menu').hide();   // Use $(this) to get mouseout  element
});
于 2013-08-16T04:21:17.930 回答
0

你的问题有点令人困惑，但我有一个解决方案给你。更改您的CSS，以便：

.divtop {
    border:1px solid darkgray;
    position:relative;
}

这将允许您绝对定位与此 div 相关的其他元素。如果您不这样做，它们将相对于浏览器窗口定位。

因此，如果您有：

.float-menu {
    list-style-type:none;
    position:absolute;
    top: 20px;    
    left:-40px;
}

这会将您的菜单放在 img 链接下方，而不会更改 div。您可能还想更改您的 javascript，以便在用户单击 img 时切换它。

$('.a1').click(function() {
   $(this).next('.float-menu').toggle();
});
于 2013-08-16T03:59:13.557 回答