Jquery 在表单中单击“选择”下拉菜单时防止覆盖关闭

我的覆盖脚本一直运行良好，直到我的客户决定向其中一个覆盖添加表单。现在，当您尝试在Firefox和手机上填写表单时（Chrome很好），选择月份和年份的下拉菜单字段将关闭覆盖。当您尝试选择日期或年份时，而不仅仅是单击它时，就会发生这种情况。这是我的演讲

这是我的代码：

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和mobile中填写表单

谢谢

---

John

尝试此操作以避免触发

$（'.item'）。从下拉列表中选择内容时，单击（函数（e）

事件

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

---

我改变了一些事情：

HTML:

JavaScript:

小提琴：

参考：

---

它似乎可以工作。

你不能只检查覆盖是否在单击处理程序中可见吗？否则可以检查单击目标谢谢，我现在正在重写这个，我会尝试那个。我们尝试用悬停来做这件事，但是单击更好。谢谢你的帖子，这似乎工作得很好！我修改了脚本，使用单击而不是悬停，因为我们决定使用悬停单击开关。我还添加了一个关闭按钮。Fiddle:JSHint说我在这一行缺少一个分号：

$（'body'）。单击（function（）{selectOpened=（selectOpened）？false:true}）；

我不明白为什么，知道我缺少什么吗？

selectOpened=（selectOpened）？false:true

是匿名函数中的一个语句。它后面应该有一个分号。从技术上讲，在当前状态下，每次单击正文时，关闭按钮都不起作用。如果（selectopen）selectOpened=false，您应该将该行更改为

；

啊，是的，您是正确的，先生。再次感谢您的帮助！

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

.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;
}

$(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');
        }
    });
});