jQuery выпадающее меню не закрывается

Question

Голые со мной Я не эксперт с jQuery. Я создал раскрывающееся меню, первое меню пункта, на которое вы нажимаете, для отображения подменю, и любые подменю внутри этого шоу/скрывать при наведении/зависании. Единственная проблема, которую я имею, я хочу основная навигацию, чтобы закрыть на мыши в любом месте документа

jQuery(document).ready(function() { 
     jQuery(".mainNav ul li").click(function() { 
      jQuery(this).find("> ul").css({ "opacity": "1", "visibility": "visible", "top": "30px" }); 
      }); 
     jQuery(".sub-menu li").mouseover(function() { 
      jQuery(this).find("> ul").css({ "opacity": "1", "visibility": "visible", "top": "30px" }); 
     }); 
     jQuery('.sub-menu li').mouseout(function() { 
      jQuery(this).find("> ul").css({ "opacity": "0", "visibility": "hidden", "top": "35px"}); 
     });}); 

//the code i tried below 
jQuery('document').click(function() { 
     jQuery(.mainNav ul li).find("> ul").css({ "opacity": "0", "visibility": "hidden", "top": "35px"}); 
    });}); 

    }); 

я предполагаю два клик являются противоречивыми, но я не слишком уверен, знаком с тем, как справиться с этим , Я был бы признателен за помощь

Редактировать. Я перепутал, и выпадающее меню закрывается, если, например, я изменяю событие click на элемент «h1», который находится прямо под ним. Затем я изменил его на .container, и подменю даже не появилось.

Answer 1

Вы можете использовать JQuery-х .not или :not

jQuery(document).not(".mainNav ul").click(function() { 
    jQuery(".mainNav ul li").find("> ul").css({ "opacity": "0", "visibility": "hidden", "top": "35px"}); 
});}); 

Вы пропустили некоторые скобки в селекторе, который я добавил, а

У вас также есть дополнительный набор }); и ваша document функция клик не внутри функции готовности. Попробуйте положить его в готовой функции, like so путем удаления }); после mouseout

На стороне записки вы можете использовать $ вместо jQuery если вы хотите

Редактировать

я получил она работать in my jsFiddle используя :not и on("click",... Попробуйте полный JQuery, если только этот фрагмент кода не работает

jQuery(document).on("click", ":not(.mainNav ul, .mainNav ul *)", function() { 
    jQuery(".mainNav ul li").find("> ul").css({ 
     "opacity": "0", 
      "visibility": "hidden", 
      "top": "35px" 
    }); 
}); 

Answer 2

вы можете попробовать это:

jQuery(document).not('.mainNav ul').click(function() { 
//-----^------^-------you have to remove quotes here.