0

我正在使用一个 jQuery 下拉菜单来导航这个站点：http://184.173.208.195/~secoast/这显然是在开发中。尽管显示 .dropmenu 不是函数的 jQuery 错误，下拉菜单仍能正常工作。

当前的主要问题是菜单隐藏在页面上的其他内容后面。我怀疑这可能部分是由于 jQuery 错误。dropmenu 模块最初包含一个 noconflict 部分，因此它不会与其他库模块冲突。

为了涵盖所有基础，这里是 jQuery 文件 (jquery.dropmenu.js) 的开头：

$.fn.dropmenu = function(custom) {

    // Default plugin settings
    var defaults = {
      openAnimation: "size",
        closeAnimation: "slide",
        openClick: false,
        openSpeed: 300,
        closeSpeed: 200,
        closeDelay: 200,
        onHide: function(){},
        onHidden: function(){},
        onShow: function(){},
        onShown: function(){},
        zindex: 100,
        openMenuClass: 'open',
        autoAddArrowElements: true
    };

然后在主文件上我有以下代码：

<script>
$(document).ready(function(){
    $("#nav-one").dropmenu({
            openAnimation: "size",
            closeAnimation: "slide",
            openSpeed: 300,
            closeSpeed: 200,
            closeDelay: 500,
            zindex: 1000
    });
});
</script>

最后是导航菜单：

<ul id="nav-one" class="dropmenu css-only">
  <li><a href="#">About Us</a>
    <ul>
          <li><a href="#">Support</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">Examples</a></li>
          <li><a href="#">Your work</a></li>
        </ul>
  </li>
  <li> 
    <a href="#">Why the Southeast</a>
    <ul>
      <li><a href="#">Support</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Examples</a></li>
      <li><a href="#">Your work</a></li>
    </ul>
  </li>
  <li> 
    <a href="#">What We Do</a>
    <ul>
      <li><a href="#">Tools</a></li>
      <li><a href="#">Office</a></li>
      <li><a href="#">Custom projects</a></li>
    </ul>
  </li>
  <li> 
    <a href="#">Resources</a></li>
</ul>

任何帮助解决这个问题将不胜感激。

谢谢。

4

3 回答 3

1

Try extending the .dropdown class with position: relative; and z-index: 100; as;

.dropmenu {
  float: left;
  margin: 50px 0 0 60px;
  padding: 0px;
  border-right: none;
  position: relative;
  z-index: 100;
}

Also noticed the error; "Uncaught TypeError: Object [object Object] has no method 'dropmenu'".

于 2013-01-25T21:53:08.697 回答
0

Before trying anything else i sugest you change:

<script type="text/javascript" src="../js/jquery.dropmenu.js"></script>

To:

<script type="text/javascript" src="js/jquery.dropmenu.js"></script>

notice the ../ that was removed, no doubt a minor miss, but quite important ;)

于 2013-01-25T21:58:55.963 回答
0

You need to use z-index to make the element above everything, by using a very high number.

Here is a screenshot:

Screenshot

As you can see I simply changed the style with z-index: 9005

于 2013-01-25T22:01:03.007 回答