原帖

Question

原帖

是否可以通过下拉CSS菜单运行js功能？

我会实现一个菜单，看起来像习惯性的导航菜单，但目的是在每个项目上运行不同的javascript函数，或者，我认为同样的事情，将一个不同的参数传递给一个函数并运行它

这是否切实可行？谷歌搜索，我选择相反（通过js下拉菜单）...

附录

感谢一些有礼貌的成员提供的建议，我已经解决了我的问题，将事件处理程序附加到菜单的每个项目。因此我在这里发布代码。再次感谢。

<HTML>
<HEAD>
<TITLE></TITLE>

<style>
<!--http://www.w3schools.com/css/css_dropdowns.asp-->
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

#myvar{
margin-top: 200px;
}
</style>

<script type="text/javascript">
    function setVar(arg){
        document.getElementById("myvar").innerHTML = arg;
    }
</script>

<script>
    var x = 0;
</script>

</HEAD>

<BODY onLOad="setVar(x)">

<div class="dropdown">
  <span>menu</span>
  <div id = "menudd" class="dropdown-content">
    <p onClick="setVar(1)">item 1</p>
    <p onClick="setVar(2)">item 2</p>
    <p onClick="setVar(3)">item 3</p>
  </div>
</div>

<p onClick="setVar(3)">again 3</p>

<P id="myvar"></P>

</BODY>
</HTML>

Answer 1

我不知道＆＃34; CSS菜单＆＃34;的含义。你不用CSS创建菜单;你用HTML创建它们。您使用CSS来设置它们的样式并使它们看起来像菜单一样。

所有基于HTML的Web应用程序都基于将行为（在JS中实现）附加到HTML元素（例如按钮或菜单项）。

将click事件的事件处理程序附加到表示特定菜单项的HTML元素，并提供您要执行的任何函数。

是否可以通过下拉CSS菜单运行js功能？

原帖

附录

1 个答案: