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

Posted 2023-05-07

【中文标题】Jquery-ui 在位置绝对 div 上可选

【英文标题】：Jquery-ui selectable on position absolute div

【发布时间】：2019-02-13 15:16:42

【问题描述】：

我正在使用 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>

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

【参考方案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>

【讨论】：

谢谢，我试试