Question

我正在尝试创建一个类似于bootstrap下拉菜单的下拉菜单：http://getbootstrap.com/javascript/#dropdowns

在JavaScript中是否有办法移动整个ul按下拉下拉按钮下方的下拉列表。这是我的HTML：

<ul class="navbar">
  <li class="navbarItem">
    Dropdown
    <ul class="dropdown">
      <li>
        Dropdown 1
      </li>
      <li>
        Dropdown 2
      </li>
      <li>
        Dropdown 3
      </li>
    </uL>
  </li>
  <li> About Us </li>
</ul>

所以基本上我想使用javascript 将ul移到页面上。

Answer 1

移动ul的方法是执行此操作，但它需要JQuery：

$('dropdown').offset().top = $('dropdown').offset().top + 5;

可以通过在页面上放置JQuery来安装它：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

希望这有帮助。

Answer 2

示例=单击以移动ul

<!doctype html>
<html>
    <head>
        <title>Bla!</title>
        <style type='text/css'>
            div.wrapper {position:absolute; left:0; top:0; width:100%; height:100% }
            ul.navbar { position:absolute; }
        </style>
        <script type='text/javascript'>
            function MoveNavBar(e) {
                var navBar = document.getElementById('navBar');
                navBar.style.left = e.clientX + 'px';
                navBar.style.top = e.clientY + 'px';
            }
        </script>
    </head>
    <body onclick='MoveNavBar(event);'>
        <div class='wrapper'>
            <ul class="navbar" id='navBar'>
              <li class="navbarItem">
                Dropdown
                <ul class="dropdown">
                  <li>
                    Dropdown 1
                  </li>
                  <li>
                    Dropdown 2
                  </li>
                  <li>
                    Dropdown 3
                  </li>
                </uL>
              </li>
              <li> About Us </li>
            </ul>    
        </div>
    </body>
</html>

使用javascript在页面上移动项目

2 个答案: