javascript - CSS/Javascript 菜单弹出

Question

我正在尝试使用 div 和无序列表中的 anchor 创建一个简单的菜单弹出效果。

我希望 html 看起来像这样:

<div class="info">
 <a href="#">Link</a> | 
 <a onclick="menu('id1');">Another Link</a>
 <ul id="id1" class="submenu">
  <li><a href="dfhdfh">Stuff</a></li>
  <li><a href="aetjetjsd">Other</a></li>
  <li><a href="etetueb">Hooray</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: #FFFFFF;
 position: relative;
 top: 4px;
 width: 150px;
 padding: 6px 0;
 clear: both;
 z-index: 2;
 display: none;
}

.info ul .submenu li
{
 background: none;
 display: block;
 float: none;
 margin: 0 6px;
 border: 0;
 height: auto;
 line-height: normal;
 border-top: solid 1px #00ff00;
}

.info .submenu li a
{
 background: none;
 display: block;
 float: none;
 padding: 6px 6px;
 margin: 0;
 border: 0;
 height: auto;
 color: #ff0000;
 line-height: normal;
}

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

我真的不知道如何在 ul 上创建 css，以便 if 出现在底层文本之上。我无法在正确的位置得到它。

我只想点击 <a>标签和菜单将直接在 <a> 下方弹出。标签。

Answer 1

我清理了你的 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;
}

如果问题仍然存在，请告诉我。就像我之前说的，我没有看到“a”在显示/隐藏上移动。

---

编辑:好的。与普通的 javascript 相比，我更喜欢 jQuery。如果您出于某种原因不能使用 jQuery，我必须让您使用纯 js 执行相同的操作。对不起!

HTML:

<ul class="root">
  <li>
    <div class="menuHeader">Something 1</div>
    <ul class="parent">
      <li>asdf 1.1</li>
      <li>asdf 1.2</li>
      <li>asdf 1.3</li>
    </ul>
  </li>
  <li>
    <div class="menuHeader">Something 2</div>
    <ul class="parent">
      <li>asdf 2.1</li>
      <li>asdf 2.2</li>
      <li>asdf 2.3</li>
    </ul>
  </li>
  <li>
    <div class="menuHeader">Something 3</div>
    <ul class="parent">
      <li>asdf 3.1</li>
      <li>asdf 3.2</li>
      <li>asdf 3.3</li>
    </ul>
  </li>
</ul>

CSS:

.info ul.root > li
{
  width: auto;
  float: left;
  border:solid 1px blue;
  padding:5px;
}
.info ul.parent
{
  padding:0px;
  display:none;
}
.info .menuHeader
{
  cursor:pointer;
}
.info li
{
  list-style: none;
}

Javascript(利用 jQuery):

$(document).ready(function() {
  $('.menuHeader').click(function(event) {
    $('.parent').hide();
    $(this).siblings('.parent').show();
  });
});

我在 CSS 中只包含了功能性的东西。显然，你需要不同的外观，所以你可以自己玩弄颜色。如果您有更多问题，请告诉我。