0

我在下面有 JS，一旦单击图像下方的图像，我试图显示一个菜单项，一旦单击一个项目，它就会消失。我有多个图像，这就是我构建这个动态内容菜单的原因。我打算通过在 userMenuContent 中添加一堆 html 元素

using var userMenuContent ="<div><form>...</<form></div>";

但首先我的小测试失败了

function userMenu() {
    var userMenudiv = document.createElement("div");
    userMenudiv.setAttribute("class", "statusContainer");
     var userMenuContent = "<p>test</p>";
    $(userMenudiv).append($(userMenuContent));
    $(userMenudiv).hide();
    this.appendChild(userMenudiv);
    $(userMenudiv).slideDown();
}

    <img  class="icon" src="image.png" onclick="userMenu()"/>

当我单击图像时，我得到 TypeError: this.appendChild is not a function。我正在使用 jquery 1.8.3 和 jquery-ui1.8.24

4

1 回答 1

2

'this' 指的是窗口对象，而不是图像。

不要使用内联事件处理程序。给 DOM 元素一个 id 并以这种方式选择它。

您不能将 div 添加到图像中。相反，您需要指定另一个目标元素

由于您使用的是 jQuery，因此只需使用 jQuery 方式即可。

$(document).ready(function(){

    $('#userMenuImg').click(function(){

        $('#target')
            .append('<div class="statusContainer"><p>test</p></div>')
            .slideDown();

    });

});
<img id="userMenuImg" class="icon" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRMKbTxKTOJbJvVTt2SZak49lARNnCU4D7ECfZn1KspIn6SXDHz3A">

<div id="target"></div>

​ ​</p>

于 2013-01-03T04:43:30.303 回答