Question

我正在玩jQuery并构建了一个小型导航，但我似乎无法让它关闭。它似乎适用于1.12.4，但不适用于3.1.0？

使用Javascript：

//open and close navigation
var navOpen = function(){
$('.navToggle').click(function(){
    $('.nav').toggle();
    console.log("i have been clicked");
});
//on hover, show description of icon    
$('.navImg1').hover(function(){
    $('.navHover1').slideToggle(100);
});

$('.navImg2').hover(function(){
    $('.navHover2').slideToggle(100);
});

$('.navImg3').hover(function(){
    $('.navHover3').slideToggle(100);
});

$('.navImg4').hover(function(){
    $('.navHover4').slideToggle(100);
});

$('.navImg5').hover(function(){
    $('.navHover5').slideToggle(100);
});

};
//hide all when document loads
$('.navHover1').hide();
$('.navHover2').hide();
$('.navHover3').hide();
$('.navHover4').hide();
$('.navHover5').hide();
$('.nav').hide();
$(document).ready(navOpen);

我刚开始看jQuery，所以如果这些都是胡说八道，我真的很抱歉！

干杯！

编辑：对不起，当然你需要我的HTML！

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Photoshop template site</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css?family=Slabo+27px" 
    rel="stylesheet">
    </head>
    <body>
    <header>
    <div class="navHolder">
    <div class="navbar">
        <img class="navToggle" src="menu-icon.png">
        <ul class="nav">
            <img src="home-icon.png" class="navImg1">
                <li class="navHover1">Home</li>
            <img src="about-icon.png" class="navImg2">
                <li class="navHover2">About</li>
            <img src="photo-icon.png" class="navImg3">
                <li class="navHover3">Photos</li>
            <img src="website-icon.png" class="navImg4">
                <li class="navHover4">Website</li>
            <img src="contact-icon.png" class="navImg5">
                <li class="navHover5">Contact</li>
        </ul>
    </div>  
    </div>
    </header>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="main.js"></script>
    </body>
</html>

为什么不在第二次点击时切换隐藏？

0 个答案: