.点击李链接重定向事件

Question

我不是程序员，只知道大量的css和html，但几乎没有javascript。我正试图实现我找到的一个免费菜单（多亏了stu-nichols），但我遇到了一个问题，我认为是jquery脚本。我联系了设计师，但他帮不上忙。

我把菜单输入jsfiddle。http://jsfiddle.net/3vAaN/

HTML:

<ul class="leftnav1">
        <li>tier1
            <ul>
                <li><a href="#url">t1 s1</a></li>
                <li><a href="#url">t1 s2</a></li>
                <li><a href="#url">t1 s3</a></li>
            </ul>
        </li>
        <li><a href="#">tier2</a>
            <ul>
                <li><a href="#url">t2 s1</a></li>
                <li><a href="#url">t2 s2</a></li>
                <li><a href="#url">t2 s3</a></li>
                <li><a href="#url">t2 s4</a></li>
                <li><a href="#url">t2 s5</a></li>
            </ul>
        </li>
    </ul>​

CSS:

.leftnav1 { font: bold 15px/15px arial, sans-serif; text-align: center; border: 5px solid #400; }
.leftnav1 {background:#600; width:180px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul {background:#700; width:170px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul {background:#800; width:160px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul ul {background:#900; width:150px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul { display: none; }
.leftnav1, .leftnav1 ul { padding: 10px 5px; margin: 0; list-style: none; -o-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); }
.leftnav1 li a { color: #ddd; text-indent: 0; text-decoration: none; display:block; }
.leftnav1 li { cursor: pointer; width: 100%; padding: 5px 0; }
.leftnav1 li a:hover { color: #fff; }
.leftnav1 li.has_ul { color: #fc0; }
.leftnav1 li.has_ul:hover { color: #0cf; }
.leftnav1 li.clicked { color: #0cf; }

​JavaScript:

$(document).ready(function () {
timer=0;
/* time in milliseconds */
collapse = 10000;
    $(".leftnav1 li:has(ul)").click(function (event) {
        if (this == event.target) {
            $(this).toggleClass('clicked').children('ul').slideToggle();
            $(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
            $(this).siblings().removeClass('clicked').find("ul").slideUp();
        }
    }).addClass('has_ul');
    $(".leftnav1").mouseover(function() {
        clearTimeout(timer);
        });
    $(".leftnav1").mouseleave(function() {
            timer = window.setTimeout(function(){
                $('.leftnav1 li > a').siblings().children().removeClass('clicked').find('ul').slideUp();
                $('.leftnav1 li > a').parent().siblings().removeClass('clicked').find('ul').slideUp();
            }, collapse);
        }); 
});

​

如果查看菜单，滑动在第一层上工作正常，因为它在li中不包含链接。在第2层，我在li中添加了一个链接，该链接也有一个子ul。只有当您单击li区域的最顶端时，滑动才有效。不是在整个li区域。我的猜测是，如果你点击单词上的任何地方，链接就会触发，而不允许脚本中的幻灯片功能触发，反之亦然，当你点击li区域的顶部时。

我在每一个可能解决它的类中都尝试过display:block，但它没有。jquery是否可能不能同时启动一个函数和跟随一个链接？菜单的实现将在电子商务网站的静态左侧栏中，链接将指向加载在内部页面区域的网站内的类别。

Answer 1

重写要在单击链接（<a>）时激发的函数。在事件处理程序结束时，确保包含return false或使用preventDefault()

请参阅http://api.jquery.com/event.preventDefault/