用于切换 div 的 Div 按钮 - Javascript/CSS答案

【问题标题】：Div button to toggle divs - Javascript/CSS用于切换 div 的 Div 按钮 - Javascript/CSS
【发布时间】：2011-07-20 14:47:47
【问题描述】：

我正在尝试添加一个“后退按钮”，它将当前 div 切换到前一个 div。基本上，我有一个填充窗口的俄克拉荷马州地图的 div。当用户单击地图的某个区域时，该 div 将切换为一个 div，该 div 是他们选择的“放大”区域的图像。我希望我的后退按钮出现在这个放大的 div 顶部的右下角，如果用户单击该按钮，该 div 将与原始俄克拉荷马州地图 div 进行切换。

这是我目前尝试过的代码：

CSS：

#backButton
{
    position:absolute;
    bottom:50px;
    right:50px;
    background:url('images/backspace.png');
    background-repeat:no-repeat;
    z-index:2;
    height:50px;
    width:50px;
}
.button
{
    position:absolute;
    bottom:100px;
    right:100px;
    background:url('images/backspace.png');
    background-repeat:no-repeat;
    z-index:2;
    cursor:pointer;
}

HTML：

<div id="backButton" style="display:none; background:url('images/backspace.png');" onClick="#container.toggle();">
    <div class="button"></div>
</div>

按钮显示正确，但无法正常工作。我确定这与onClick="#container.toggle();" 有关，但我不知道如何正确操作。

仅作为背景信息，容器是原始的俄克拉荷马州地图，当我切换到放大的 div 时，它在我的 JS 代码 ($("#container").toggle();) 中被关闭。

编辑：好的，所以我确实有 Jquery，我尝试像其他切换事件一样制作点击事件：

 $("#backButton").click(function(e)
{
    $("#container").toggle();
            $("#backButton").toggle();
});

--> 我删除了 div 中的 onClick 部分。当我单击该按钮时，它会关闭，但容器 div（俄克拉荷马州地图）不会重新打开。

【问题讨论】：

我认为您可能将 JS 语法与 jQuery 语法混淆了。你在用 jQuery 吗？
如果你使用jquery，你为什么使用onClick标签？您应该改用 $("#backButton").click(function() {})。

标签： javascript html css button toggle

【解决方案1】：

当您使用 jQuery 时（在您的代码中很明显）

把这个放到你的javascript中：

$("#button").click(function(){
  $("#backButton").toggle();// hide the div (assume you have it turned on somewhere
  $("#container").toggle();) // show the other div
});

从标记中删除onClick="#container.toggle();"

【讨论】：

仅供参考，我真的不喜欢 div 的 ID 名称为“button”和“backButton”，尤其是第一个。
ID 名称是什么？
我倾向于不使用“button”，因为它与元素名称相同 - 前缀为“turnOffButton”或“zoomOffButton”等。“backButton”我将制作一个“zoomOffButtonContainer” - 更具描述性。
您知道为什么在按钮关闭时容器没有重新打开吗？请参阅我的问题中的 EDIT。
我发现它为什么没有切换；我确实需要关闭放大的 div。感谢您的帮助！

【解决方案2】：

您希望您的 onClick 方法调用一个有效的函数，例如 abcMethod()。（无论您的切换代码在哪里）。

【讨论】：