jQuery UI可以在位置绝对div上选择

Question

我正在使用JQuery-UI Selectable插件：https://jqueryui.com/selectable/ 我想在子菜单中选择一些项目。

一个最小的示例：

$(".selectable").selectable();

.parent {
  background-color: gray;
  width: 300px;
}

.child {
  display: none;
  position: absolute;
  background-color: #bababa;
}

.parent:hover .child {
  display: block !important;
}

.selectable li {
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background-color: lightgrey;
  border: 1px solid gray;
}

.selectable .ui-selecting {
  background: #FECA40;
}

.selectable .ui-selected {
  background: #F39814;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="parent">
  hover me
  <div class="child">
    select this:
    <ol class="selectable" style="list-style: none;padding: 0;">
      <li class="">1</li>
      <li class="">2</li>
      <li class="">3</li>
      <li class="">4</li>
      <li class="">5</li>
    </ol>
  </div>
</div>

问题： 选择开始时，父元素将失去悬停状态，因此子菜单将关闭。如果拖动指针并选择元素，则将选中此元素（即使关闭了子菜单），但是我需要菜单不丢失悬停状态（我只需要保持其可见）即可。

Answer 1

在selectable选择时添加帮助程序类应该有所帮助

$(".selectable").selectable({
  start: e => {
    $('.parent').addClass('open')
  },
  stop: e => {
   setTimeout(() => {
    $('.parent').removeClass('open')
   })
  }
});

当然，您还需要在CSS中设置.open .child {display: block}。

看到它正常工作：

$(".selectable").selectable({
  start: e => {
    $('.parent').addClass('open')
  },
  stop: function(e) {
   setTimeout(() => {
    $('.parent').removeClass('open')
   })
  }
});

.parent {
  background-color: gray;
  width: 300px;
}

.child {
  display: none;
  position: absolute;
  background-color: #bababa;
}

.parent:hover .child, .open .child {
  display: block !important;
}

.selectable li {
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  background-color: lightgrey;
  border: 1px solid gray;
}

.selectable .ui-selecting {
  background: #FECA40;
}

.selectable .ui-selected {
  background: #F39814;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="parent">
  hover me
  <div class="child">
    select this:
    <ol class="selectable" style="list-style: none;padding: 0;">
      <li class="">1</li>
      <li class="">2</li>
      <li class="">3</li>
      <li class="">4</li>
      <li class="">5</li>
    </ol>
  </div>
</div>