Question

我有一个菜单div，它是不透明度0，最初可见隐藏。我本人希望通过点击另一个div（它的菜单贴在我的页面顶部，可通过点击发现/隐藏）来提供这个div。

这很有效.... 一次 ......

我可以点击“#menuIcon”，我的菜单可以使用。我可以点击它，它是隐藏的。然后我的菜单永远隐藏，不会再次可用。帮我解决这个问题??

jQuery code
/* Discovers menu on clicks */
$('#menuIcon').click(function () {
    if ($('#menu ul').css('visibility') == 'hidden') {
        $('#menu ul').css('visibility', 'visible');
        $('#menu ul').animate({
            opacity: 1
        }, 500);
    } else {
        $('#menu ul').animate({
            opacity: 0
        }, 500,
        function () {
            $('#menu ul').css('visibility', 'hidden');
        });
    }
});

Answer 1

错字：

$('#menu ul').animate({opacity : 0 }, 500, function() {
            $('#menu ul').css('visibility','hidden');
        });

jsfiddle：http://jsfiddle.net/9geoh4vz/1/

Answer 2

在您的动画脚本中，您忘记在正确的位置关闭括号，这应该修复它：

$('#menuIcon').click(function () {
    if ($('#menu ul').css('visibility') == 'hidden') {
        $('#menu ul').css('visibility', 'visible');
        $('#menu ul').animate({
            opacity: 1
        }, 500);
    } else {
        $('#menu ul').animate({
            opacity: 0
        }, 500,
        function () {
            $('#menu ul').css('visibility', 'hidden');
        });
}
});

另请注意，JSFiddle是您的朋友。使用它来帮助整理脚本并检查脚本中的错误

Answer 3

如果你想要，你可以尝试这种完全不同的方法，它也很简单。

使用：fadeToggle（）插件JQuery

JSFiddle : DEMO

<强> CSS

<div id="example" class="handsontable">

<强> HTML

html, body {
    margin:0%;
    width:100%;
    height:100%;
}
.header {
    display:block;
    width:100%;
    height:50px;
    margin:0%;
    background:#2b2937;
    padding:5px 0px;
}
.menu {
    display:block;
    float:right;
    width:80px;
    height:auto;
    background:lightgreen;
    text-align:center;
    color:white;
    padding:5px 0px;
    margin-top:10px;
    cursor:pointer;
}

.menu-list
{
    display:none;
    padding:0px;
    background:lightgreen;
    float:right;
    position:fixed;
    top:60px; /* Header height=50px + top/bottom-padding=5px so, 50+5+5 = 60px*/
    right:0px;
}

li
{
    padding:5px 0px;
}

<强> JS

<div class="header"> <span class="menu">
        MENU
    </span>

</div>
<span class="menu-list">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
</span>

Answer 4

试试这个：您可以使用变量来了解菜单是否已经显示一次并在if条件下使用它。

注意： - 您可以使用is(':visible')代替.css('visibility')和用户show() / hide()来使菜单显示和隐藏，如下面的代码所示

var isVisibleOnce = false;
/* Discovers menu on clicks */
$('#menuIcon').click( function() {
    //check if isVisibleOnce is false and menu not visible
    //then show menu
    if(!isVisibleOnce  && !$('#menu ul').is(':visible')) {
        //set isVisibleOnce to true
        isVisibleOnce  = true;
        $('#menu ul').animate({opacity : 1 }, 500,function(){
           $('#menu ul').show();
       });
    }
    else {   
        $('#menu ul').animate({opacity : 0 }, 500), function() {
            $('#menu ul').hide();
        });
    }
});

菜单仅“可点击”一次

4 个答案: