Question

当我点击某个输入选择时，我有一个div向下滑动（打开）。在这个div中，我有一些其他输入选择，我的目标是在点击页面的其余部分时向上滑动div。

我的问题：

当我选择输入中的某个项目时，div会向上滑动，我不希望这种情况发生。

只有在我点击它外面时才有一些方法可以向上滑动div吗？
为什么div中的选择也会让它向上滑动？

这是我的javascript来滑动div：

$(document).mouseup(function (e) {
  var container = $('.myDiv');
  if (container.has(e.target).length === 0) {
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});

Answer 1

当我选择输入中的某个项目时，div会向上滑动   它，我不希望这发生。

有什么方法可以在我点击外面时滑动div吗？   为什么div中的选择也会让它向上滑动？

在子元素上使用event.stopPropagation()以防止幻灯片事件被它们触发。

event.stopPropagation - 防止事件冒泡DOM 树，防止任何父处理程序被通知事件。

这是一个简单的jsFiddle以及下面的基本示例。

<强> jQuery的：

$('div').click(function(){
  $('#slideMeUp').slideUp();
});

$('select').click(function(e){
  e.stopPropagation();
});

<强> HTML：

<div>Clicking here will trigger it! 
    <select>
        <option>This won't trigger the click event anymore!</option>
    </select>
    Clicking here will also trigger it!
</div>

<div id="slideMeUp">Only clicking the outer div will slide me up!</div>

Answer 2

您可以使用e.target.id ID

检查container

        $(document).mouseup(function (e) {
            var container = $('.myDiv');
            if(e.target.id==$(this).attr('id'))
            {
            if (container.has(e.target).length === 0) {
                $(container).removeClass('close');
                $(container).addClass('open');
                $(container).next().slideUp(200);
            }
            }
        });

Answer 3

我建议绑定mousedown而不是mouseup。浏览器之间的行为存在不一致，可能与您的问题有关。

你还应该添加一些逻辑来检查点击的元素不是div本身，点击input之外，但仍然在div内部会导致发生slideUp。

if (!container.has(e.target).length && !container.is(e.target)) {
  ...
}

除此之外，它应该可以正常工作。

Have a fiddle

Answer 4

如果它是导致问题的特定项目，可能是这样的？

单击时，只要单击的项目在列表中为“not”，就告诉它滑动你的div。

('body').click(function(event) {
  if (!$(event.target).is('#id_of_item .class_to_ignore')) {
    var container = $('.myDiv');
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});

单击其中的项目时，Div会向上滑动

我的问题：

4 个答案:

Have a fiddle