如何在按钮附近显示div

Question

我的页面上有很多按钮。 我需要做的是在按钮旁边显示一个div。 我尝试了这个：

<style>
#noteDiv {display:none; position: absolute; background-color: white; border: 1px solid blue;}
</style>
<script>
function showNote(e) {

var x = 0, y = 0;
if (!e) e = window.event;

if (e.pageX || e.pageY) {
      x = e.pageX;
      y = e.pageY;
                  }
else if (e.clientX || e.clientY) {
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
                 }


document.getElementById("noteDiv").style.display = "block";
document.getElementById("noteDiv").style.left = (x)+"px";
document.getElementById("noteDiv").style.top = (y-350)+"px";


                }

function hideNote() {
  document.getElementById("noteDiv").style.display = "none";
 }
</script>

<body>    
<?php
 echo "<button type ='button' id = 'noteButton'>Note</button>"; 
 echo "<script>document.getElementById('noteButton').onclick = showNote;\n";
 echo "</script>";
 ?>
</body>
  <div id='noteDiv'  >
  <div ><span onclick="hideNote()">Close</span></div>
  <br clear="all">
  <div id='noteContent' style='max-height: 30em'></div>
  </div>

确实有效。 但是有时页面会在页面顶部显示一个div，就像一条警告消息一样，因此noteDiv的位置将远离其应附加的按钮。

我的想法是获取按钮的位置，并将按钮位置的x，y值发送到函数showNote（），从那里显示noteDiv。 我不知道这个主意是否合理，以及如何获取当前点击按钮的位置并将其转换为javascript？

任何建议和提示将不胜感激！

Answer 1

所有HTML，例如<button> <div> <span> <ul><li> <table>等，都必须位于<body> </body>标记内：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!-- you can include css and javascript here -->
    <!-- but best place to include javascript ist at the bottom -->
    <!-- see last comment -->
</head>
<body>

    <?php echo '<button type="button" id="noteButton">Note</button>';   ?>


    <!-- best place to include javascript or echo them with PHP what ever
     right before the closing body tag -->
</body>
</html>

您正在通过PHP在打开<body>标记之前echoing <button> ，这是错误的。 尝试使用萤火虫和https://validator.w3.org/之类的东西

Answer 2

从一开始就。 在页面顶部加载javascript是一个非常糟糕的主意 。 我会让大量的网络文章向您解释原因。 只是说一个原因，js文件是在html呈现之前下载的（取决于浏览器），从而导致页面呈现较慢。

关于您的方法：

三个词：关注点分离。 定位dom元素不是属于javascript的内容（某些极少数情况除外）。 包含对象位置的DOM样式属于“层叠样式表”，也称为CSS 。

因此，如果未正确显示某些内容，请勿尝试使用javascript进行修复。 它只会使您头痛不已。

为了获得更好的答案，请提供可以向我们显示错误的代码。

UPDATE

这是您可能想要实现的工作示例（可能未优化）。 拜托，拜托，拜托，拜托，...阅读一本关于html，css和js的书。 完全值得。 我没有使用php ，不需要它。

仅作记录，我个人使用的html页面的一般结构是这样的：

html
    head
        title
        meta
        styles link
        styles sections
        js **LIBRARIES** which need to be loaded on **TOP**
        google analytics
    body
        html content
        js **LIBRARIES** which need to be loaded on **BOTTOM**
        js scripts

为了您的理智和为您提供帮助的人们正确地缩进 （这也是对正在阅读您的代码的人们的尊重的标志）。

这是带有代码段的代码：

 function toggleNote(id) { var noteParent = document.getElementById(id); var note = noteParent.querySelector('.note'); var display = "none"; if (note.style.display == "none" || note.style.display == "" ) { display = "block"; } note.style.display = display; }

 .note { display: none; position: relative; background-color: white; border: 1px solid blue; } .noteContent { max-height: 30em }

 <body> <div class="buttonContainer" id="note0"> <button id='noteButton' onclick="toggleNote('note0')">Note</button> <div class='note'> <div> <button onclick="toggleNote('note0')">Close</button> </div> <br clear="all"> <div class='noteContent'>It's something!</div> </div> </div> </body>

如何在按钮附近显示div

问题描述

2 个解决方案

解决方案1
2 2015-08-21 20:52:29

解决方案2
2 2015-08-21 20:57:22

如何在按钮附近显示div

问题描述

2 个解决方案

解决方案1 2 2015-08-21 20:52:29

解决方案2 2 2015-08-21 20:57:22

解决方案1
2 2015-08-21 20:52:29

解决方案2
2 2015-08-21 20:57:22