最小化按钮不起作用

Question

嗨我有一个图像，如果我点击图像，我的导航栏将通过改变css中的可见性，使用jquery隐藏，但它似乎没有工作。我不明白我的错误在哪里我应用了与导航栏按钮相同的方式，但它不适合这个。

HTML

<nav id="nav" align="middle">
    <ul>
        <div class="mini"><a href="#"><img src="images/minimize.png" style="width:50px;height:20px;"></a>
        </div>
        <li><a href="#"><img src="images/video-1.png" class="left" style="width:100px;height:50px;padding-right:70px;margin-bottom:12px;"></a>
        </li>
        <li><a href="#"><img src="images/news-1.png" class="left" style="width:100px;height:50px;padding-right:70px;margin-bottom:12px;"></a>
        </li>
        <li><a href="#"><img src="images/logo-4.png" class="home" style="width:80px;height:80px;" onclick="$('.video' || '.news' || '.games' || 'music').toggle();" onmouseover="this.src='images/logo-4-hover.png';padding:20px;"
     onmouseout="this.src='images/logo-4.png';"></a>
        </li>
        <li><a href="#"><img src="images/games-1.png" class="right" style="width:100px;height:50px;padding-left: 70px;margin-bottom:12px;"></a>
        </li>
        <li><a href="#"><img src="images/music-1.png" class="right" style="width:100px;height:50px;padding-left: 70px;margin-bottom:12px;"></a>
        </li>
    </ul>
</nav>

的Javascript

$(document).ready(function () {
    $(".mini").click(function () {
        $("#nav").toggleClass("hidden");
    });

    $("img.home").click(function () {
        $("img.left, img.right").toggleClass("visible");
    });

});

CSS

li {
    display: inline;
    margin-right: .75em;
    list-style: none;
    margin: 0;
    padding: 0;
}
html, body {
    height:100%;
    /* new */
}
ul {
    position: fixed;
    bottom: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 2px solid #ccc;
    border-width: 3px 0;
}
img.left {
    visibility: hidden;
}
img.right {
    visibility: hidden;
}
.visible {
    visibility: visible !important;
}
.mini {
    position: absolute;
    margin: auto;
    width: 100%;
    bottom: 100px;
}
#nav {
    visibility: visible;
}