簡體   English   中英

使用JavaScript在UL中隱藏/顯示div

[英]Hide/show div in ul with javascript

首先讓我說我知道這是重復的,但是我無法通過查看以前的答案來找到解決方案,因此我希望有人可以解釋我對此做錯了什么。

這是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,請多多包涵,謝謝!

編輯以反映missingno的建議

您正在使用單個字符串參數而不是兩個字符串參數來調用事件處理程序。 嘗試改變

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邏輯更改為不需要ID(例如,您可以創建選擇器來搜索當前元素的第一個div和ul后代。

我對您的代碼感到奇怪的是,您提到的第一個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');">

我假設您希望在鼠標懸停在文本Manager Options時顯示/隱藏mtk_div_submenu_0 div。 希望這會有所幫助!

通過執行您的操作,每次觸發onMouseOver事件時,您都將附加jQuery hover事件。 每次您附加另一個監聽器時。

相反,請在准備就緒的文檔上初始化事件:

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

這將在文檔准備就緒時對其進行初始化,並且將對其進行一次初始化。

然后只需從HTML中刪除onMouseOver事件即可。

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

首先,您要走很長的路要走這個問題。 jQuery具有內置的切換方法,可以為您執行顯示/隱藏。 其次,將懸停調用放在您要在懸停顯示的項目的子元素上。 這是您代碼的更新版本:

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

對於簡單的情況,我寧願不要使用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;
}

那會成功的

小提琴: 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");
            });
        }

小提琴: http : //jsfiddle.net/Varinder/vnwy3/1/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM