0

クリック メニュー スクリプト用のこの jquery ではまだ運がありません。attr 設定を調べましたが、うまく機能しませんでした。

onload を使用して本文にスクリプトをロードする必要がありますか?

機能する簡単なスクリプトがありますが、派手なスライドなしで開閉するにはメニューをクリックする必要があります:(

--jquery--

$(function(){
    $(document).ready(function () {
        $('#top_menu_menub').click(function (e) {
            e.preventDefault();
            var $this = $(this);
            var ulId = $this.attr("#topmenu");
            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');
                    }
                });
            }
        });
    });
});

--- 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;
}

#topmenu {list-style-type:none; width:200px; padding:0; margin:0 auto; height: 24px;}
#topmenu ul {list-style-type:none; padding:0; margin:0; border: solid 1px #eee; border-radius: 5px; }
#topmenu li {float:left; margin:1px 1px 0 0;position:relative; z-index: 9999}
#topmenu li.sub {width: 200px; height: 16px; padding: 1px 0px 0px 0px;}
#topmenu li.sub:hover { color:#00CCFF; background-image: url(../images/apecbutton.jpg); background-repeat: no-repeat;background-position: 8px 0px; height: 24px;}
#topmenu 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;}
#topmenu li a:hover {background:#fff; color:#4FA4F9;}
#topmenu ul {position:absolute;left:-9800px;width:115px; }
#topmenu li.click {}
#topmenu li.click ul{left: 12px; top:22px; background: #fff; }

---html---

<div id="top_menu_menub">
    <ul id="topmenu">
        <li class="sub">
            <ul>
                <li><a href="">11111111</a></li>
                <li><a href="">22222222</a></li>
                <li><a href="">33333333</a></li>
                <li><a href="">44444444</a></li>
            </ul>
        </li>
    </ul>
</div>
4

1 に答える 1

1

この行は意味がありません：

var ulId = $this.attr("topmenu");

また

find("ul" + ulId)

HTMLであなたは持っています：

<ul id="topmenu">

スクリプトをやり直す必要があると思います

于 2012-06-20T10:19:07.330 に答える