Jquery-ui выбирается по абсолютной позиции div

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

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

javascript jquery css jquery-ui jquery-ui-selectable

08.09.2018 17:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

237

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавление вспомогательного класса при выборе 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>

Спасибо попробую

— 08.09.2018 17:38

08.09.2018 17:26