javascript - 为什么我的 JQuery 推送菜单突然不工作了?

标签 javascript jquery html css jpanelmenu

我的网站目前配备了以前功能齐全的推送菜单,但现在突然在玩弄了 css 后,它不想工作了。我将提供我的代码:

HTML

<div id="right">

  <div id="Top">

     <div id="menubar">

        <a id="menubarheader">DrumCenter</a>

        <a href="#menu" id="button" class="buttonicon"></a>

        <a href="#" id="searchlink" class="searchlink"></a>

     </div>

  </div>

</div>

CSS

#right {

width: 100%;

background-color: #fff;

z-index: 5;

position: fixed;

left: 0px;

margin: 0px;

height: 100%;

-webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
    moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
      o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
        box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);

}

#menu {

float:left;

width: 80%;

height: 100%;

}

#menu li {

background-color: white;

border-bottom: 1px solid #c8c8c8;

}

#Top {

width: inherit;

height: 80px;

margin: 0px;

}

#menubar, #menubarheader {

    width: inherit;

    height: 80px;

}

#menubar {

    min-width: 250px;

    position: absolute;

    background: #fff;

    border-bottom: 3px solid #ABABA0;

line-height: 80px;

}

#button, #menubarheader, #searchlink {

    position: absolute;

    vertical-align: middle;

    font-weight: lighter;

}

#button {

    text-decoration: none;

    padding-left: 5%;

}

.buttonicon {

font-family: "glyphs";

    text-decoration: none;

    font-size:  230%;

    color: gray;

}

.buttonicon:before {

content: "\e696";

}

#searchlink{

    text-decoration: none;

    padding-left: 87%

}

.searchlink{

font-family: "icomoon";

    text-decoration: none;

    font-size:  150%;

    color: gray;

}

.searchlink:before {

content: "\e67f";

}

#menubarheader {

    text-align: center;

    color: #0099FF;

    font-size: 200%;

    vertical-align: middle;

}

Javascript

$('#button').toggle( 
        function() {
            $('#right').animate({ left: 250 }, 'fast', function() {
                $('#button');
            });
        }, 
        function() {
            $('#right').animate({ left: 0 }, 'fast', function() {
                $('#button');
            });
        }
    );

在你问之前,是的,我已经在我的 HTML 中链接了正确的 jquery,我只是没有在这里提供它。我想知道的是为什么这已经停止工作,我该如何解决这个问题?我对此很困惑。谢谢你!如果你想看我说的我的网站,你可以去 ( http://www.codesrce.com/thedrumcenter ) 但是如果你的屏幕宽度是 1399 像素或更小,你只会看到我说的,因为那是移动网站。

最佳答案

您在加载 jQuery 之前编写脚本,剪切它然后在所有 <script></script> 之后粘贴它标记被调用,它将被修复!

关于javascript - 为什么我的 JQuery 推送菜单突然不工作了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24345101/

相关文章:

javascript - 自动计算并转换为货币格式 Javascript

javascript - 在对象内移动(而不是复制)属性 - 使用引用

javascript - 登录 react native 后如何更改导航器初始路线

Jquery 更改显示 css 无法正常工作

jquery - 选择并拖动多个列表项(jQuery ui 可排序)

javascript - 隐藏上一个 div 并在单击按钮时切换下一个 div?

javascript - jQuery 数据表 : Unsorted View

javascript - HTML5 文件 API : FileReader. readAsText() 返回 "undefined"

javascript - 如何将上传的图片存储在不同的文件夹中从而自动生成文件夹?

html - UIWebView 上的自定义字体仅更改数字的字体