JQuery-UI выбирается на позиции абсолютного Div - PullRequest
Новая
       29

JQuery-UI выбирается на позиции абсолютного Div

0 голосов
/ 08 сентября 2018

Я использую плагин 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>

Проблема : Когда выбор начинается, родительский элемент теряет состояние при наведении, поэтому подменю закрывается. Если вы перетащите указатель и выберете элементы, эти элементы будут выделены (даже если подменю закрыто), но мне нужно, чтобы меню не теряло состояние при наведении (мне просто нужно, чтобы оно оставалось видимым).

1 Ответ

0 голосов
/ 08 сентября 2018

Добавление вспомогательного класса при выборе selectable должно помочь 

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

Конечно, вам также нужно установить .open .child {display: block} в CSS.

Посмотри, как работает: 

$(".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>
...