基本上，我想为页面访问者提供调整左侧栏大小的能力，我尝试使用jQuery UI Resizable来实现这一点。当#left-bar旁边的div不包含iFrame时，它可以正常工作，但如果它有iFrame，结果如下所示：
#main{
height: 900px;
width: 1800px;
background-color: aqua;
display: flex;
}
#left-bar{
height: 100%;
width: 250px;
background-color: blue;
outline: medium solid red;
margin-right: 1px;
display: inline-block;
}
#topic-window{
height: 100%;
width: 100%;
background-color: navy;
outline: medium solid red;
display: inline-block;
}
#docWindow{
width: 100%;
height: 100%;
position:relative;
background-color: yellow;
}个字符
下面是#topic-window div中没有iFrame时的工作方式：
#main{
height: 900px;
width: 1800px;
background-color: aqua;
display: flex;
}
#left-bar{
height: 100%;
width: 250px;
background-color: blue;
outline: medium solid red;
margin-right: 1px;
display: inline-block;
}
#topic-window{
height: 100%;
width: 100%;
background-color: navy;
outline: medium solid red;
display: inline-block;
}
#docWindow{
width: 100%;
height: 100%;
position:relative;
background-color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">
<script>
$(function(){
$("#left-bar").resizable({
direction: 'right'
})
})
</script>
</head>
<body>
<div id="main">
<div id="left-bar"></div>
<div id="topic-window">
</div>
</div>
</body>
</html>的字符串
所以你可以看到，它是相当顺利的，当没有iFrame。这就是我想要的表演。我是jQuery的新手，所以我无法找到解决这个问题的方法，有人能给我指出克服这个问题的方向吗？
2条答案
按热度按时间ebdffaop1#
这可能是iframe窗口“吞下”鼠标移动事件的效果，resize插件本身需要确定您移动分隔符的方式。
您应该能够抵消这一点，通过为面板内的所有元素设置
pointer-events: none，当调整大小开始时-并在停止时再次删除它。个字符
qrjkbowd2#
在CBroe的帮助和我自己的一些补充下，我得到了我想要的结果。
以下是所有感兴趣的人的片段：
个字符