Скрыть/показать div в ul с javascript

Question

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

Это часть вывода меню с помощью PHP скрипта:

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

со следующим, как мой сценарий, согласно https://stackoverflow.com/a/11842992, который должен показывать каждый подменю при наведении курсора на его родительский контейнер

function showMenu(a,b) { 
$(a).hover(
function(){ 
    $(b).show(); 

}, 
function(){ 
    $(b).hide(); 
}) 
} 

Javascript и CSS - мои слабые костюмы, может кто-нибудь сказать мне, где моя проблема? Я чувствую, что onMouseOver не работает так, как я ожидал. Однако я все еще учился манипулировать DOM, пожалуйста, несите меня, спасибо!

Edited чтобы отразить предложения missingno в

Answer 1

Для простых сценариев, я предпочел бы держаться подальше от использования JS

Вот как

HTML

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

CSS

#mtk_main_menu:before, 
#mtk_main_menu:after { 
    content:""; 
    display:table; 
    clear:both; 
} 

#mtk_main_menu { 
    *zoom:1; 
} 

#mtk_main_menu > li { 
    position:relative; 
    float:left; 
} 

#mtk_main_menu > li > div { 
    position:absolute; 
    left:-999px; 
    background:grey; 
} 

#mtk_main_menu > li:hover > div { 
    left:0; 
} 

Это будет делать трюк

Fiddle: http://jsfiddle.net/Varinder/7pXSw/

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

Если вы действительно хотите, чтобы пройти путь JS - вот как:

HTML

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

CSS

#mtk_main_menu:before, 
#mtk_main_menu:after { 
    content:""; 
    display:table; 
    clear:both; 
} 

#mtk_main_menu { 
    *zoom:1; 
} 

#mtk_main_menu > li { 
    position:relative; 
    float:left; 
} 

#mtk_main_menu > li > div { 
    position:absolute; 
    display:none; 
    /*left:-999px;*/ 
    background:grey; 
} 

#mtk_main_menu > li:hover > div { 
    /*left:0;*/ 
} 

JS

function showMenu(args) { 
      var arguments = args.split(","); 
      var submenuWrapper = arguments[1].replace(" ", ""); 
      var $subMenuWrapper = $("#" + submenuWrapper); 

      $subMenuWrapper.show(); 

      var $menuItem = $subMenuWrapper.closest("li"); 
      $menuItem.on("mouseout", function() { 
       $subMenuWrapper.hide(); 
       $(this).off("mouseout"); 
      }); 
     } 

Fiddle: http://jsfiddle.net/Varinder/vnwy3/1/

Answer 2

Вы вызываете обработчик событий с одним параметром строки вместо двух. Попробуйте изменить

showMenu('mtk_submenu_0, mtk_div_submenu_0') 

в

showMenu('mtk_submenu_0', 'mtk_div_submenu_0') 

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

//This looks for an element of class "a" 
$("a").hover(

//This uses the contents of the `a` variable instead: 
$(a).hover(

Наконец, ваша функция использует «mtk_submenu_0» как селектор jquery. Это ищет класс вместо id. Измените селектор, чтобы добавить «#» на передний план или изменить логику jquery, чтобы не нуждались в идентификаторах (например, вы могли бы создавать селекторы для поиска первых дочерних элементов div и ul текущего элемента.

Answer 3

Одна вещь, которую я нахожу странно о вашем коде, что первый div, который вы упоминаете, mtk_submenu_0, находится внутри div, который вы показываете/скрываете, mtk_div_submenu_0. После того как вы спрячете внешний div, внутренний div не может «зависать», тем самым предотвращая его повторное отображение .

Чтобы обеспечить внутренний DIV не получает скрытые, попробовать что-то вроде этого:

HTML:

<ul id="mtk_main_menu"> 
<li class="mtk_topmenu">Manager Options 
    <div id="mtk_div_submenu_0"> 
     <ul id="mtk_submenu_0"> 
      <li class="mtk_submenu">Preferences</li> 
      <li class="mtk_submenu">Employee Options</li> 
     </ul> 
    </div> 
</li> 

Javascript:

$(document).ready(function() { 
    $('.mtk_topmenu').hover(
     function() { 
      $('#mtk_div_submenu_0').show(); 
     }, 
     function() { 
      $('#mtk_div_submenu_0').hide(); 
     }); 
}); 

Из-за своей линии:

<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');"> 

Я предположил, что вы искали, чтобы иметь mtk_div_submenu_0 Див показать/скрыть, когда текст Manager Options в наведении мышки , Надеюсь, это поможет!

Answer 4

Выполнение того, что вы делаете, при каждом запуске события onMouseOver вы присоединяете событие jQuery hover. Каждый раз, когда вы присоединяете другого слушателя.

Вместо этого инициализировать событие в документе готовый:

$(function() { 
    $("#tk_div_submenu_0").hover(
     function(){ 
      $("#mtk_submenu_0").show(); 
     }, 
     function(){ 
      $("#mtk_submenu_0").hide(); 
     }) 
    ); 
}); 

Это будет инициализировать его, когда документ будет готов, и он будет инициализировать его раз.

Затем просто удалите событие onMouseOver из HTML.

<li class="mtk_topmenu">Manager Options ... </li> 

Answer 5

Во-первых, вы пройдете долгий путь вокруг проблемы. jQuery имеет встроенный метод toggle, который выполняет show/hide для вас. Во-вторых, вы помещаете вызов наведения на дочерний элемент элемента, который вы пытаетесь показать при наведении. Вот обновленная версия кода:

<ul id="mtk_main_menu"> 
    <li class="mtk_topmenu" onMouseOver="showMenu(this,'mtk_div_submenu_0');"> 
     Manager Options 
     <div id="mtk_div_submenu_0"> 
      <ul id="mtk_submenu_0"> 
       <li class="mtk_submenu">Preferences</li> 
       <li class="mtk_submenu">Employee Options</li> 
      </ul> 
     </div> 
    </li> 
</ul> 

JS:

function showMenu(a,b) { 
    var divStr = '#' + a.id + " div"; 
    $(divStr).toggle(); 
} 

я использовал событие парения на LI элемента, как это имеет больше смысла в этом случае.

Здесь в скрипкой: http://jsfiddle.net/3Ecrq/