Question

我的叠加脚本运行良好，直到我的客户决定将表单添加到其中一个叠加层。现在，当您尝试在Firefox和移动设备上填写表单时（Chrome工作正常。）月份和年份的选择下拉菜单字段关闭叠加层。当您尝试选择日期或年份时，会发生这种情况，而不仅仅是点击它。这是我的fiddle来演示。

这是我的代码：

var hoverIntent;
var windowIsLarge;
jQuery(function($) {

windowIsLarge = $(document).width() > 769 ? true : false;

    $('.item').hover(function(e) {
        e.preventDefault();
      if (windowIsLarge) {
        clearInterval(hoverIntent);
        $this = $(this);
            hoverIntent = setTimeout(function() {
        $this.find(".overlay").toggle();
            },600);
}else{
    $('.item').click(function(e) {
        e.preventDefault();
        clearInterval(hoverIntent);
        $this = $(this);
        $this.find(".overlay").toggle();
       });
    }
});
});

如何制作，以便选择菜单不会关闭叠加层，您可以在Firefox和移动设备中填写表单？

谢谢！

约翰

Answer 1

尝试此选项以避免在从下拉列表中选择内容时触发$('.item').click(function(e)事件

$('.item').click(function(e) {
        if(e.target == this) {
        e.preventDefault();
        clearInterval(hoverIntent);
        $this = $(this);
        $this.find(".overlay").toggle();
        }
       });
    }

Answer 2

我改变了一些事情：

HTML：

<div class="overlay overlay1 hidden" value="1">Content 1
<form>
    <select>
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>
</form>
</div>
<div class="overlay overlay2 hidden" value="2">Content 2
    <form>
        <select>
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
        </select>
    </form>
</div>
<div class="overlay overlay3 hidden" value="3">Content 3</div>

<div class="item" value="1">Hover Me 1</div>
<div class="item" value="2">Hover Me 2</div>
<div class="item" value="3">Hover Me 3</div>

CSS：

.item {
    position:relative;
    width:200px;
    height:140px;
    border: 1px solid;
    display: inline-block;
}
.hidden {
    display:none;
}
.overlay {
    position:absolute;
    width:620px;
    height:140px;
    background: #FFF;
    border: 1px solid;
    top: 8px;
    left:0%;
    z-index:100;
}

的JavaScript：

$(function() {
    var selectOpened = false;
    $('select').click(function(e) {
        selectOpened = !selectOpened;
        e.stopPropagation();
    });
    $('body').click(function() { if (selectOpened) selectOpened = false; });
    $('.item').mouseover(function() {
        $('.overlay' + $(this).attr('value')).removeClass('hidden');
    });
    $('.overlay').on('mouseleave', function() {
        if (!selectOpened) {
            $(this).addClass('hidden');
        }
    });
});

小提琴： http://jsfiddle.net/q4bm2hx6/

参考： Problem with jQuery mouseleave firing when container has select box

似乎有效。

单击表单中的选择下拉菜单时，阻止覆盖关闭

2 个答案: