Question

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

请记住，可能有任何纯粹的HTML，不仅限于ul，li，它仅用于说明目的。

<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>

脚本

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

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

我已经解决过已经问过的问题，但无法找到解决此问题的方法，任何帮助都会非常有用！

Answer 1

我认为jQuery UI Selectable并非设计用于此类行为。但你仍然可以手动完成：

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

Updated fiddle

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

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

Answer 2

使用distance选项。

距离means tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.

例如distance: 10（10个像素），下面的元素将有一个公平的机会接收点击。

嵌套Jquery Ui中的传播问题可选

2 个答案: