Jquery-ui 在位置绝对 div 上可选

Question

我正在使用 JQuery-UI 可选插件：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>