0

我有一个地图应用程序，它使用 jQuery 在单击按钮时显示/隐藏一些地图控件。现在，除了一个 - pan_zoom 控件之外，所有控件都可以正常工作。地图控件的 html 元素与一些内联样式一起动态添加：

<div class="pan_zoom" style="display: block; top: 4px">pan zoom button</div>

pan_zoom 控件在加载地图时隐藏：

$('.pan_zoom').hide();

单击按钮后，将调用包含以下行的函数：

$('.pan_zoom').toggle();

此功能在第一次单击时隐藏 pan_zoom 控件。但是，它没有在下次单击时显示控件。

我再次测试了上面的内容，没有在初始化时隐藏 pan_zoom 控件。这一次，切换对元素没有影响。

阻止切换功能正常工作的可能原因是什么？

请注意，我没有为此元素设置任何 CSS 显示属性，我可以通过将切换功能替换为以下内容来解决此问题：

if($('.pan_zoom').css('display') == 'block')
{
 $('.pan_zoom').hide();
}
else
{
 $('.pan_zoom').show();
}

我更感兴趣的是找出为什么toggle()不能正常工作。

点击处理程序是：

$('button[name="expand_map"]').click(toggleMap);
function toggleMap() {
....
 $('.pan_zoom, .and_other_controls').toggle();
}
4

2 回答 2

0

试试这个，也许它会有所作为：

<div class="pan_zoom" style="display:none; top: 4px">pan zoom button</div>

// Comment out this line
//$('.pan_zoom').hide();

// Proceed as normal for the click handler
$('.pan_zoom').toggle();
于 2012-11-12T14:15:59.410 回答
0

这是一个棘手的问题。我把它写在这里，以便其他遇到这个问题的人可以仔细研究计算元素的样式。在我的例子中，pan_zoom 控制元素的计算高度和宽度结果为 0，这是由于控制 div 中的 div 的绝对定位。这反过来会影响 jQuerytoggle()函数如何处理元素的显示。

我认为它认为宽度和高度为零的元素等同于隐藏元素，因此不会隐藏它。解决此问题的一种方法是使用show()/hide()如问题中所述。为了使用toggle(), 另一种不太明显的方法是为宽度和高度设置一个值。使用 jQuery，这将是：

$('.pan_zoom').css({'height': '1px', 'width': '1px'});
于 2012-11-14T09:09:05.867 回答