传播问题在嵌套的JQuery UI可选 [英] Propagation Issue In Nested Jquery Ui Selectable

问题描述

问题是：在嵌套的jQuery Ui中，选择上下文最上层的子元素意味着当我点击子元素1时选择元素1，但是当我点击元素111或1111时，它会选择元素2直到只需要元素关注的焦点是，它不是它的父级，直到鼠标专注于此。

Problem is: In nested jQuery Ui selectable, selecting top most child of context means when I click on Item 1 it select Item 1, but when I click on Item 111 or 1111 it select until Item 2 while I need only the element on which focus is, not it's parent until mouse focus on that.

请记住，可能有任何纯html不仅限于ul，li，它是仅供说明之用。

Please keep in mind that there might be any pure html just not limited to ul, li, it is for illustrative purpose only.

<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2

    <ul >
      <li>Item 11
        <ul >
          <li>Item 111</li>
          <li>Item 112</li>
          <li>Item 113</li>
          <li>Item 114

            <ul >
              <li>Item 1111</li>
              <li>Item 1112</li>
              <li>Item 1113</li>
              <li>Item 1114</li>
              <li>Item 1115</li>
            </ul>  

          </li>
          <li>Item 115</li>
        </ul>  

      </li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>  
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

脚本

Script Is

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

小提琴是： - http://jsfiddle.net/z425phwn/2/

我已经经历了已经问过的问题，但无法找到任何帮助都将非常有用！

I have gone through already asked question but not able to find any solution for this issue, Any help will be very useful!

推荐答案

我想 jQuery UI Selectable 不是为这种行为而设计的。但你仍然可以手动完成：

I suppose jQuery UI Selectable is not designed for such behaviour. But you still can do it manually:

$(document).ready(function()
{
    $("*").click(function()
    {
        $(".ui-selected").removeClass("ui-selected");
        var thisEl = $(this);
        if (thisEl.closest("#selectable").length)
        {
            thisEl.addClass("ui-selected");
        }
        return false;
    });
});

更新了小提琴。

为了模拟jQuery UI Selectable（并使用它的样式），您可以添加如下内容：

Also to emulate jQuery UI Selectable (and to use its styles) you can add something like:

$(document).ready(function()
{
    var selectable = $("#selectable");
    selectable.addClass("ui-selectable");
    selectable.find("*").addClass("ui-selectee");
});

这篇关于传播问题在嵌套的JQuery UI可选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！