2

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

我的问题：

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

  • div只有当我在外面点击时，有什么方法可以向上滑动吗？
  • 为什么 div 内的选择也会使其向上滑动？

这是我向上滑动 div 的 javascript：

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

4 回答 4

3

当我在其中的输入选择中选择某些项目时，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>
于 2013-05-15T13:01:40.770 回答
0

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

您还应该添加一些逻辑来检查单击的元素不是div本身，单击只是在 a 之外input，但仍然在div当前会导致slideUp发生。

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

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

有一个小提琴

于 2013-05-15T13:16:34.767 回答
0

你可以e.target.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);
            }
            }
        });
于 2013-05-15T13:06:19.353 回答
0

如果是导致问题的特定项目，也许是这样的？

只要单击的项目在列表中“不”，单击时告诉它滑动您的 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);
  }
});
于 2013-05-15T13:16:57.563 回答