javascript - 尝试从 'hover' CSS 过渡转换为类似的 javascript 功能。失败了

Question

我很抱歉不得不发布一个有点菜鸟(可能是语法)的问题，但我今天已经为这个问题苦苦思索了几个小时。我在互联网上到处都是，包括这个网站上的许多帖子，但我只是找不到我需要的东西(或者我认为。)问题可能是我对 javascript 缺乏经验。我希望有人能告诉我我的错误在哪里。

背景 - 我正在开发的网络应用托管在 ColdFusion 2016 服务器上。我认为这不一定与这篇文章相关，但也许吧。

我有一个图标，悬停时它会“滑出”一个“快速笔记”面板(通过将 CSS 中的 right: 属性从 -500px 过渡到 500px)。在这里，用户可以在 RTF 文本区域中输入注释，然后提交以更新他们在用户表中的记录。这工作正常。

这是图标 (notes_slideout) 和主要注释部分 (notes_slideout_inner) 的相关 CSS，以及工作正常的悬停内容。

#notes_slideout {
        position: fixed;
        bottom: 104px;
        right: 0;
        width: 32px;
        height: 32px;
        padding: 5px;
        text-align: center;
        background: #454545;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        border-top-left-radius: 10px; 
        border-bottom-left-radius: 10px;
        box-shadow: 
            0 2px 2px 0px black;
        z-index:1; 
    }

    #notes_slideout_inner {
        position: fixed;
        bottom: 104px;
        top: 35px;
        right: -500px;
        background: #454545;
        width: 500px;
        padding-top: 10px;
        height: auto;
        text-decoration: none; 
        color: white;
        font-size:18px;
        font-family:Arial, Helvetica, sans-serif; 
        vertical-align:center;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        box-shadow:
            0 2px 2px 0px black; 
        z-index:1;
    }



#notes_slideout:hover {
        right: 500px;
        z-index:1;
    }

    #notes_slideout:hover #notes_slideout_inner {
        right: 0;
        z-index:1;
    }   

此设置的问题在于，如果用户将鼠标悬停在 slideout_inner div 上/失去焦点，例如通过单击文本区域输入注释，它会按设计滑回右侧。

我想做的是使用 onClick 并让 javascript 执行基本相同的 CSS 设置更改并切换按钮功能。

这是我在图片上的标签:

    <img src="/#sys_var#/resources/images/notepad_icon.png" alt="Notes" height="32" onClick="openNotes()"/>

下面是我定义的函数:

    <script type="text/javascript">
function openNotes() {
    document.getElementById("notes_slideout_inner").style.right = "500px";
    document.getElementById("notes_slideout").onClick = "closeNotes()";

}

function closeNotes() {
    document.getElementById("notes_slideout_inner").style.right: = "-500px";
    document.getElementById("notes_slideout").style.right: = "0px";
    document.getElementById("notes_slideout").onClick = "openNotes()";
}
</script>

我已经尝试添加/删除

type="text/javascript"

来自脚本标签(我们的其他工作函数都没有)，以及使 onClick 看起来像这样:

onClick="javascript:openNotes()"

两者的结果相同。

因此，当我去测试时，我在 CSS 中注释掉了最后两个“悬停”部分，悬停被破坏了(如预期的那样)，当您单击该按钮时，该按钮似乎什么也不做。但是，经检查它会产生错误 -

SCRIPT438: Object doesn't support property or method 'matches'

现在我第一次看到一个全新的错误:

SCRIPT5009: 'openNotes' is undefined

非常感谢您分享任何见解。如果您认为我应该包含更多相关代码，我很乐意发布。这个应用程序非常复杂，所以我试着去掉并提供相关的部分，但我可能忽略了一些东西。我非常感谢这个网站上的每一个人。这些年来，你一次又一次地救了我。

编辑:不确定我是怎么错过这个的，但看起来它可能有用？

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Answer 1

您已将内部 div #notes_slideout_inner 定位为 top:32px;，这是外部 div #notes_slideout 的大小，即 宽度:32px.

因此，每当您将鼠标悬停在外部 div 上并尝试在内部 div 上获得 :hover 时，它已经比您悬停的位置低 32px。因此它向后滑动。

也许您正在寻找:

#notes_slideout {
        position: fixed;
        bottom: 104px;
        right: 0;
        width: 32px;
        height: 32px;
        padding: 5px;
        text-align: center;
        background: #454545;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        border-top-left-radius: 10px; 
        border-bottom-left-radius: 10px;
        box-shadow: 
            0 2px 2px 0px black;
        z-index:1; 
    }

    #notes_slideout_inner {
        position: absolute;
		display:inline-block;
		height:500px;
		width:500px;
        top: 0;
        right: -500px;
        background: #454545;
        padding-top: 10px;
        text-decoration: none; 
        color: white;
        font-size:18px;
        font-family:Arial, Helvetica, sans-serif; 
        vertical-align:center;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        box-shadow:
            0 2px 2px 0px black; 
        z-index:10;
    }



#notes_slideout:hover {
        right: 500px;
    }

<div id="notes_slideout">
	<div id="notes_slideout_inner">
		<input />
	</div>
</div>