javascript - 如何强制 Dojo TitlePane 与 CSS 重叠？

Question

我有这个jsfiddle其中在中央 Pane 的右上角有两个 TitlePane 小部件。现在，当单击右侧的 TitlePane(“切换 basemap ”)时，它会导致左侧的 TitlePane(“ map 叠加层”)向左移动。相反，我希望右侧的 TitlePane 在打开时隐藏左侧的 TitlePane 而不是移动它。

我试过使用 z-index、overflow、position 和 float，但没有成功迄今为止。我是 Dojo 的新手，所以我想我还没有找到样式参数的正确组合。

有没有人有什么想法？

提前致谢!

Answer 1

尝试为您的标题 Pane 提供一个 ID，然后添加 evenhooks，如下所示。要为小部件指定一个 ID，只需将其作为 id:'leftId' 放入 props 即可。在示例中，我将使用您的类名作为 id。

dojo.addOnLoad(function() {
    var wLeft = dijit.byId('leftTitlePane');
    var wRight = dijit.byId('rightTitlePane');
    dojo.connect(wLeft, 'onShow', function() {
        wRight.domNode.style.display = 'none';
    });
    dojo.connect(wLeft, 'onHide', function() {
        // wait a few for collapse to finish
        setTimeout(function() {wRight.domNode.style.display = '';}, 120);
    });
    dojo.connect(wRight, 'onShow', function() {
        wLeft.domNode.style.display = 'none';
    });
    dojo.connect(wRight, 'onHide', function() {
        // wait a few for collapse to finish
        setTimeout(function() {wLeft.domNode.style.display = '';}, 120);
    });
});