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/

关于li加上链接重定向的.click事件

1 个答案: