javascript - 第一次显示，通过 jQuery 隐藏后

Question

我有这个 HTML 结构：

 <div id="side-menu">
            <ul>
            <li><img src="img/once_sonra.png"></img></li>
            <li><img src="img/online_destek.png"></img></li>
            <li><img src="img/sizi_arayalim.png"></img></li>
            </ul>

  </div>

CSS：

#side-menu {
    display:block;
    z-index:20;
    position:fixed;
    right:0;
    top:76px;
}

我想要，当单击我的页面时显示此项目并在隐藏动画效果后，但我不知道我该怎么做？谢谢。

Answer 1

像这样的东西：

$(document).ready(function() {
    // hide the menu initially
    $("#side-menu").hide();
    $(document).click(function() {
        // on click show and then hide menu with animation
        $("#side-menu").slideDown().delay(500).slideUp();
    });
});

演示：http: //jsfiddle.net/dhVzq/

如果您不喜欢幻灯片效果，jQuery 为您提供了其他几个选项。

Answer 2

您需要绑定到click页面的事件：

jQuery(function($) {
    var $sideMenu = $('#side-menu'),
        itemClicked = false; // Use to determine whether an item was clicked

    $sideMenu.hide();

    // Catch clicks on the document
    $(document.body).click(function(e) {

        // Check if the menu is visible
        if (!$sideMenu.is(':visible')) {
            $sideMenu
                .stop(true) // Cancel any animation from a previous click
                .show(); // Show the menu

            // Set a timer to hide the menu after 5 seconds if nothing was clicked
            setTimeout(function() {
                if (!itemClicked) {
                    $sideMenu.slideUp(); // Hide the menu with the slideUp effect
                }
                itemClicked = false; // Reset the flag for next time round
            }, 5000); 
        }
    });

    // Catch clicks on menu items
    $sideMenu.click(function(e) {
        itemClicked = true;
    });
});​