如何在按鈕附近顯示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