Question

我正在尝试更改此处发布的此脚本，以便我可以废弃我对jQuery的垃圾尝试，但我需要脚本来响应div id或类的点击而不是href链接

使用.class或#id更新所有代码

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

$(function(){
    $(document).ready(function () {
        $('a.menu_button').click(function (e) {
            e.preventDefault();
            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');
                }
            });
        }  
    });
 });
 });

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

Answer 1

我用

$(function() {
 $('.classname').click(function() {
...

（假设您的类名在引用的css文件中定义）

或

$(function() {
 $('#idname').click(function() {
...

它会做你想要的。

将onclick函数从href更改为div

1 个答案: