Question

我正在尝试为项目创建导航栏，我需要一个按钮来调用下拉菜单的功能。如果我有一个按钮，我不能像div那样格式化它，它从其他选项中脱颖而出。有没有办法让div成为一个按钮？我已尝试将onclick属性放在其上，但下拉菜单不会出现在同一位置。提前致谢。

（我对编码很新，所以试着用简单的术语解释一下）

我决定做一个悬停下拉菜单，让事情变得更轻松，但谢谢你的回答！

Answer 1

你说你对编码很新。你读过关于jquery的吗？我肯定会建议。使用jquery函数单击<div>标记时，很可能会发生这种情况。这是一个例子：

$("#IdOfDivTag").click(function(){
    alert("The paragraph was clicked.");
});

您必须将div或class属性添加到您想要执行操作的div标记中（除非您希望对所有<div>执行相同的操作，在这种情况下您可以使用＆＃34; div＆＃34;在jquery语句中。）

要实现jquery，您需要在代码中添加一个jquery库...您可以从这里开始：http://www.w3schools.com/jquery/jquery_get_started.asp

Answer 2

有不同的方法可以做到这一点。一种是使用jQuery（一个Javascript扩展名），就像Branden Keck向你展示的一样。另一种方法是只使用html和Javascript：有一个html属性可以创建一个Javascript事件：

<div id="myDiv" onclick="clickEvent()">Some text</div>

clickEvent必须包含括号，因为它是一个Javascript函数。你的Javascript看起来像这样：

function clickEvent() {
document.getElementById("myDiv").innerHTML = "Hello World";
}

这是一个片段：

function myFunction() {
  document.getElementById("myDiv").innerHTML = "Hello World without jQuery!";
}

$("#myDiv2").click(function() {
  $("#myDiv2").html("Hello World with jQuery!");
});

$("#myDiv3").click(function() {
  $("#hiddenDiv").slideToggle(750); // 750 is the sliding time in ms
});

#myDiv,
#myDiv2, #myDiv3, #hiddenDiv {
  background: #0000ff;
  color: #ffffff;
  transition: 0.5s all;
  -webkit-transition: 0.5 all;
  font-family: "Arial";
  width: auto;
  height: auto;
  font-size: 1.3em;
  margin: 0.4em;
  padding: 0.2em;  
  border-left: 1px groove #f0f0f0;
  border-top: 1px groove #f0f0f0;
}
#myDiv:hover,
#myDiv2:hover, #myDiv3:hover {
  background: #ffffff;

  color: #000000;
  padding: 0.22em;
  box-shadow: 0.22em 0.22em 0.44em #000000;
}
#myDiv2, #myDiv3 {
  background: #ff0000;
}

#hiddenDiv {
  background: #00aa00;
  
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="myDiv" onclick="myFunction()">Click this div! Without jQuery</div>
<div id="myDiv2">Click this div! With jQuery</div>

<div id="myDiv3">Toggle hidden Text With jQuery<span style="font-size: 0.7em;font-family:Arial;font-style:italic;"> May lag because of snippet.</span></div>

<div id="hiddenDiv">You found me!</div>

你如何使Div与按钮做同样的事情？

2 个答案: