0

无法让这个脚本与我的菜单一起使用真的已经尝试了所有想法吗？div 有一个悬停的背景图像，然后 jquery 是否单击释放 li 菜单...悬停功能是否搞砸了？

<div class="top_menu">
    <div class="top_menu_menub">
        <ul id="menu">
            <li class="sub">
                <ul>
                    <li><a href="">Control Center</a></li>
                    <li><a href="">APEC Trinity</a></li>
                    <li><a href="">APEC Living</a></li>
                    <li><a href="">APEC Energy</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>​

jQuery：

$(function() {
    $(document).ready(function() {
        $('li').click(function(e) {
            var $this = $(this);
            var ulId = $this.attr("href");
            var clicked_menu_is_visible = $this.parent().find("ul" + ulId).filter(':visible').length > 0;
            var visible_uls = $this.parent().find("ul").filter(':visible');
            if (visible_uls.length === 0) { //no menus showing - just show clicked menu 
                $ul = $this.parent().find("ul" + ulId);
                $ul.slideToggle('medium');
            }
            else { //close open menus (should only be one open) then open clicked menu
                //via callback 
                $this.parent().find("ul").filter(':visible').slideUp("medium", function() {
                    $ul = $this.parent().find("ul" + ulId);
                    //open clicked menu - unless menu was already open when clicked
                    if (!clicked_menu_is_visible) {
                        $ul.slideToggle('medium');
                    }
                });
            }
            console.log($(this).children()[0].innerText);
            e.preventDefault();
            return false;
        });
    });
});​

CSS：

.top_menu_menub {
    padding: 3px 0px 0px 0px;
    width: 200px;
    float: left;
    height: 20px;
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #aaa;
    background-image: url(../images/apecbuttona.jpg);
    background-repeat: no-repeat;
    background-position: 8px 4px;
    cursor: pointer;
}
#menu {
    list-style-type: none;
    width: 200px;
    padding: 0;
    margin: 0 auto;
    height: 24px;
}
#menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: solid 1px#eee;
    border-radius: 5px;
}
#menu li {
    float: left;
    margin: 1px 1px 0 0;
    position: relative;
    z-index: 9999
}
#menu li.sub {
    width: 200px;
    height: 16px;
    padding: 1px 0px 0px 0px;
}
#menu li.sub:hover {
    color: #00CCFF;
    background-image: url(../images/apecbutton.jpg);
    background-repeat: no-repeat;
    background-position: 8px 0px;
    height: 24px;
}
#menu li a {
    display: block;
    color: #999;
    font-family:arial, sans-serif;
    font-size:11px;
    line-height:23px;
    width:107px;
    text-decoration:none;
    text-align:left;
    cursor:pointer;
    font-weight:100;
    border-bottom: 1px solid # eee;
    padding-left: 8px;
}
#menu li a:hover {
    background: #fff;
    color: #4FA4F9;
}
#menu ul {
    position: absolute;
    left: -9800px;
    width: 115px;
}
#menu li.click {
}
#menu li.click ul {
    left: 12px;
    top: 22px;
    background: #fff;
}
/* the background image is for IE7 */

​
4

1 回答 1

0

您的单击处理程序正在捕获单击事件<li class="sub">。$this.attr("href")我不知道这是否是您想要的，但它具有确保始终返回的副作用，undefined因为li元素缺少该属性。

这会导致var ulId未定义的问题，进而导致$ul始终为空 jQuery 对象的问题，因此没有其他任何事情发生。

此外，您的 CSS 会导致最初不可见或停9800px在屏幕外的所有内容。你的意思是让某些东西最初可见，以便用户知道点击或悬停在哪里？

请在您的问题中说明您期望的行为。

更新：

根据澄清，以下是您修改后的 jQuery 代码以执行您想要的操作：

$(function() {
    var toggleMenu = function(e) {
        var $this = $(this),
            ulId = $this.attr("href") || $this.find('a').attr("href"),
            $ul = $this.parents("ul").filter("ul#" + ulId), //cache query
            $all = $("ul#menu ul"), //cache query
            clicked_menu_is_visible = $ul.is(':visible'), //changed .filter to .is
            visible_uls = $all.is(':visible'); //changed .filter to .is
        if (!visible_uls) { //no menus showing - just show clicked menu 
            $ul.slideToggle('medium');
        }
        else { //close open menus (should only be one open) then open clicked menu via callback
            $all.filter(':visible').slideUp("medium", function() {
                //open clicked menu - unless menu was already open when clicked
                if (!clicked_menu_is_visible) {
                    $ul.slideToggle('medium');
                }
            });
        }
        console.log('hideMenu triggered');
        e.preventDefault();
        return false;
    };
    $(document).ready(function() {
        $('div.top_menu_menub').click(function(e) {
            $('ul#menu ul').show('medium');
            console.log('div clicked');
            e.preventDefault();
            return false;
        });
        $('li.sub li, ul#menu a').click(toggleMenu);
        $('ul#menu ul').mouseleave(toggleMenu);
    });
});​

这适用于您的 HTML 结构和 CSS。在这里工作小提琴。

作为旁注，我将改为如下所示：

$(function() {
    var toggleMenu = function(e) {
        var self = $(this),
            elemType = self[0].tagName.toLowerCase(),
            //get caller
            menu = null;
        if (elemType === 'a') {
            //anchor clicked, nav back to containing ul
            menu = self.parents('ul').not('ul#menu');
        } else if (elemType === 'ul') {
            //mouseleft ul, ergo menu is this.
            menu = self;
        }
        if (menu) {
            menu.hide('medium');
        }
        e.preventDefault();
        return false;
    };
    $(document).ready(function() {
        $('div.top_menu_menub').click(function(e) {
            $('ul#menu ul').show('medium');
            console.log('div clicked');
            e.preventDefault();
            return false;
        });
        $('ul#menu a').click(toggleMenu);
        $('ul#menu ul').mouseleave(toggleMenu);
    });
});​

这也适用于您的 HTML 结构。在这里工作小提琴。

于 2012-06-20T14:46:18.860 回答