Меню только «clickable» однажды

Question

У меня есть div меню, непрозрачность 0, видимость скрытая изначально. Я, судя по всему, хочу, чтобы этот div был доступен по клику другого div (его меню, которое прилипает к верхней части моей страницы, можно открывать/скрывать через клик).

Это прекрасно работает .... ONE TIME ...

я могу нажать на "#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

В вашем живого сценария, вы забыли закрыть скобки в нужном месте, это должно исправить:

$('#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 2

опечатка:

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

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

Answer 3

Попробуйте это: Вы можете использовать переменную, чтобы знать, если меню было показано один раз и использовать его в состоянии, если.

Примечания: - Вы можете использовать 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(); 
     }); 
    } 
}); 

Answer 4

Если вы хотите, вы можете попробовать этот совершенно другой подход, и это тоже просто.

Использована fadeToggle() плагин JQuery

JSFiddle : DEMO

CSS

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; 
} 

HTML

<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> 

JS

$(".menu").click(function() 
       { 
        $(".menu-list").fadeToggle(); 
       });