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 に答える