jquery - 不能将两个 div 并排放置

Question

我有两个 div，一个在另一个里面，现在我想显示名为 subMenu 的子 div 出现在 div 父亲旁边，当事件是 mouseEnter 在名为 的 div 父亲中普鲁巴。该事件运作良好，我的问题是我的 CSS 问题。我该如何解决这个问题？

我的 html

<div id="prueba" class="ui-state-hover" style="width:150px;height:20px;float:left">category
</div>
<div style="float:left"> other thing </div> 

我的 Js

$(document).ready(initialize);

function initialize() {
    $('#prueba').hover(showSubMenu, hideSubMenu);
}
function showSubMenu() {
    var subMenu = '<div id="subMenu" class="ui-state-hover" style="width:150px;position:relative;top:0px;left:100%">subCategory</div>';
    $('#prueba').append(subMenu);
}

function hideSubMenu() {
    $("#subMenu").remove();
}

here's my live demo

更新我不希望具有文本 other thing 的 div 移动他的位置。我希望子菜单出现在这个 div 上

Answer 1

无需每次都创建子菜单，您可以直接使用它来检查它是否存在。在 hideSubMenu 方法或 remove 中，您可以隐藏它。

试试这个

工作 demo

  $(document).ready(initialize);

  function initialize() {
    $('#prueba').hover(showSubMenu, hideSubMenu);
  }
  function showSubMenu() {
    if($("#subMenu").length == 0){
       $(document.body).append('<div id="subMenu" class="ui-state-hover" style="width:150px; float: left;">subCategory</div>');
    }
      $("#subMenu").css({
          position:'absolute',
          top: $('#prueba').offset().top,
          left: ($('#prueba').offset().left + $('#prueba').width())
      }).show();
  }

  function hideSubMenu() {
    $("#subMenu").hide();
  }