Question

所以我一直在制作一个显示商务电话号码的菜单，我终于按照计划完成了所有工作，但现在我有一个javascript延迟，打嗝或某种类型的延迟/表现有趣。

我在jsfiddle上有所有内容所以这是我的工作 Jsfiddle code

如果我可以添加图片，我会展示什么是奇怪的，但我会尽力解释它。

因此，当您点击菜单时，它有时会显示

<h3> and <p>

正确，有时您单击它并且它不显示

<h3> and <p>

或者当我点击X菜单时它仍然会显示

<h3> and <p>（留言）

Answer 1

您可以在构成菜单容器的元素上触发它，而不是尝试在每个单独的栏上触发更改。这更简单，因为您只想在单击菜单时显示/隐藏一个特定元素。的 HTML

条形图上的点击事件将被删除，条形图将被赋予唯一ID，以使其成为有效的HTML。

<div class="container" onclick="myFunction(this)"> <div id="bar-1" class="bar1"></div> <div id="bar-2" class="bar2"></div> <div id="bar-3" class="bar3"></div> </div>

<强>的Javascript

myFunction现在调用showphone，showphone大大简化为显示/隐藏单个元素：

function myFunction(x) { x.classList.toggle("change"); showphone(); } function showphone() { div = document.getElementById("phone-1"); if (div.style.display == 'none') { div.style.display = 'inline'; } else { div.style.display = 'none'; } }

JS中的事件冒泡了DOM。因此，在此示例中，如果单击＆＃34; bar＆＃34;，因为它没有附加任何单击事件，浏览器将在元素层次结构中向上运行，直到找到具有单击的元素为止事件（在这种情况下＆＃34;容器＆＃34;）并触发该事件。此功能意味着您可以定义可点击的整个区域，即使其中包含许多其他元素，也不必在每个包含的元素上定义单击。

以下是一个工作示例：https://jsfiddle.net/b9w61L0o/2/

Answer 2

您也可以这样简单地完成：

＆＃13;

.container {
  display: inline-block;
  cursor: pointer;
  float: right;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 4px 0;
  transition: 0.4s;
}

.change #bar-1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 4px);
  transform: rotate(-45deg) translate(-8px, 4px);
}

.change #bar-2 {
  opacity: 0;
}

.change #bar-3 {
  -webkit-transform: rotate(45deg) translate(-8px, -6px);
  transform: rotate(45deg) translate(-8px, -6px);
}

.icon-bar {
  transition: all 0.3s ease;
  color: black;
  font-size: 16px;
  float: right;
  margin-right: 4px;
}

ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Float the list items side by side */

ul.tab li {
  float: right;
}


/* Style the links inside the list items */

ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  float: right;
}

.topright {
  float: right;
  cursor: pointer;
  font-size: 20px;
}

.topright:hover {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" onclick="myFunction(this)">
  <div id="bar-1" class="bar"></div>
  <div id="bar-2" class="bar"></div>
  <div id="bar-3" class="bar"></div>
</div>

<p class="fa fa-phone icon-bar">Phone numbers</p>

<ul class="tab">
  <div id="phone-1" style="display:none; float: right" class="tabcontent">
    <h3>Area / Place</h3>
    <p>This number is?</p>
  </div>
</ul>

＆＃13;

def Popart()

＆＃13;

但是你需要包含jQuery并在整个元素上执行click事件而不是每个＆＃34; line＆＃34;。

Javascript错误或打嗝？

2 个答案: