添加java脚本后，Dropdown Menu无法在Index.html上工作

Dropdown Menu not working on Index.html after adding java script

本文关键字：Index html 工作 Menu 脚本 java Dropdown 添加      更新时间：2023-09-26

我正在创建我的个人网站，但我无法在桌面上找到下拉菜单，当它在移动设备上时，隐藏导航并单击（使用js）显示导航。但它不仅适用于Index.html

<div class="content">
    <div class="header">
            <div class="logo"><a href="assets/img/logo.png" alt="GM">GM</a>
            </div>
        <span class="menu-trigger">Menu</span>
        <nav class="nav clearfix">
            <ul class="clearfix">
                <li><a class="active" href="index.html">Home</a>
                </li>
                <li><a href="about.html">About</a>
                </li>
                <li><a href="#">Portfolio <i class="fa fa-angle-down fa-1"></i></a>
                    <ul class="sub-nav">
                        <li><a href="music.html">Music</a>
                        </li>
                        <li><a href="code.html">Code</a>
                        </li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
        <!-- end of Nav -->
    </div>
    </div>

CSS：

/**Header**/
.nav {
    height: 61px;
    background: #381120;
}
.logo a{
    float: left;
    text-decoration: none;
    color: #7e7e7e;
    font-size: 43px;
    padding-top: 11px;
    padding-left: 30px;
}
.nav ul {
    margin: 0;
    padding: 0;
    float: right;
}
.nav ul li {
    list-style: none;
    float: left;
    display: block;
    padding: 19px;
}
.nav ul li a {
    color: #7e7e7e;
    text-decoration: none;
    font-size: 25px;
}
.nav ul ul.sub-nav {
    display: none;
    background: #381120;
    width: auto;
    position: absolute;
}
.nav ul li:hover > ul {
    display: block;
}
.nav ul ul li {
    float: none;
    padding-left: 24px;
}
.nav ul li a.active {
    color: #08a1c7;
}
.nav ul li a:hover {
    color: #efefef;
}

和：

.menu-trigger{
    padding-top: 16px;
    padding-right: 30px;
    font-size: 25px;
    text-align: center;
    display: none;
    float: right;
    color: #7e7e7e
}
.menu-trigger p{
    color: #7e7e7e
}
    /**480px**/

@media only screen and (max-width : 480px) {
    .menu-trigger{
        display: block;
    }
    .nav, .mobile-nav{
        display: none;
    }
    .nav-expanded{
        display: block;
    }
    .nav ul li{
        float: none;
        border-bottom: 1px solid #7e7e7e;
    }
    .nav ul li:last-child{
        border-bottom: none;
    }
}

这是JS，很抱歉我忘了把它放在这里：

jQuery(document).ready(function() {
    jQuery(".menu-trigger").click(function() {
        jQuery(".nav").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('display', '');
        });
    });
});

您真的应该能够用CSS来动画化所有这些。你甚至不需要jQuery，除了点击操作。

此外，也许情况并非如此，但在过去，我不得不像这样编写我的点击处理程序，以绕过一些奇怪的错误。jQuery中的SlideToggle可能会导致一些小故障效果，而且它并不是制作动画菜单的好方法。尽量避免滑动切换（）。

$("[your-selector]").on("click",function(){
     /// do something...
});

我用您的代码创建了一个jsfiddle，它似乎工作得很好。从你问的内容来看还不清楚，但我想你的下拉菜单在手机屏幕上不起作用。在HTML文件中导入jquery可能会出现问题。这可能会解决你的问题

jQuery(document).ready(function() {
    jQuery(".menu-trigger").click(function() {
        jQuery(".nav").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('display', '');
        });
    });
});

尽管我修复了它，但我添加了一个

<div class="content">///content goes here</div>

两次导致它破裂仍然感谢你的帮助。

相关文章：