CSS內聯JS菜單的onclick

Question

我有這樣的HTML：

<div class="info"> 
    Some Text Boom A <a onclick="menu('id1');">Link</a> | More text 
    <a onclick="menu('id2');">Another Link</a> | more text 
    <ul id="id1" class="submenu"> 
     <li><a href="dfhdfh">A1</a></li> 
     <li><a href="aetjetjsd">A2 This is Long</a></li> 
     <li><a href="etetueb">A3</a></li> 
    </ul> 
    <ul id="id2" class="submenu"> 
     <li><a href="dfhdfh">B1</a></li> 
     <li><a href="aetjetjsd">B2</a></li> 
     <li><a href="etetueb">B3</a></li> 
    </ul> 
    </div> 

的JavaScript：

function menu(id) { 
    var myLayer = document.getElementById(id); 
    if (myLayer.style.display == "none" || myLayer.style.display == "") { 
     myLayer.style.display = "block"; 
    } else { 
     myLayer.style.display = "none"; 
    } 
} 

CSS：

.info ul.submenu 
{ 
border: solid 1px #000; 
border-top: none; 
background-color: #fff; 
position: relative; 
top: 4px; 
width: 150px; 
padding: 6px 0px 0px 0px; 
z-index: 2; 
display: none; 
} 

.info ul.submenu li 
{ 
display: block; 
border: none; 
border-top: solid 1px #00ff00; 
} 

.info ul.submenu li a 
{ 
display: block; 
padding: 6px 0px 6px 4px; 
color: #ff0000; 
} 

.info ul.submenu li a:hover 
{ 
background: #0000ff; 
} 

這是我希望它看起來當我點擊第一條鏈接：

--------------------------------------------------------------------- 
Text Boom A [Link] | More Text [Another Link] | more text 
--------------------------------------------------------------------- 
Stuff that i| A1    |iv is still shown. Text that is 
underneath t| A2 This is Long |own. Text that is underneath the div 
is still sho| A3    | 

現在這種作品，除了A1，A2，A3彈出框之外，總是對齊到最左邊的下方。如何修復我的CSS和/或HTML以實現這種效果？

Answer 1

您將不得不手動設置ul元素的left樣式。

在javascript中：

function menu(eSrc, id) { 
    var myLayer = document.getElementById(id); 
    if (myLayer.style.display == "none" || myLayer.style.display == "") { 
     myLayer.style.display = "block"; 
     myLayer.style.left = eSrc.offsetLeft + "px"; 
     myLayer.style.top = (eSrc.offsetTop + eSrc.offsetHeight) + "px"; 
    } else { 
     myLayer.style.display = "none"; 
    } 
} 

然後，HTML是：

<div class="info"> 
    Some Text Boom A <a onclick="menu(this, 'id1');">Link</a> | More text 
    <a onclick="menu(this, 'id2');">Another Link</a> | more text 
    <ul id="id1" class="submenu"> 
     <li><a href="dfhdfh">A1</a></li> 
     <li><a href="aetjetjsd">A2 This is Long</a></li> 
     <li><a href="etetueb">A3</a></li> 
    </ul> 
    <ul id="id2" class="submenu"> 
     <li><a href="dfhdfh">B1</a></li> 
     <li><a href="aetjetjsd">B2</a></li> 
     <li><a href="etetueb">B3</a></li> 
    </ul> 
</div> 

你必須讓你知道在哪裏元素位置傳遞一個 「參考」 元素。

此外，爲此，在您的CSS中將position:relative;更改爲position:absolute;。