用jQuery写的简单语句，我该怎么用PrototypeJS写呢
使用jQuery编写的语句，如何使用prototype编写该语句
$("#productNav li a").click(function(){
$("#productNav li a").removeClass("selectedProd");
$(this).addClass("selectedProd");
$("#productListCntnr > ul").slideUp(300);
$("#productListCntnr > ul."+this.id).slideDown(300);
});回答 2
Stack Overflow用户
发布于 2009-07-13 17:52:30
我不确定处理你正在做的滑动工作的最好方法，但这应该完成了点击和添加/删除selectedProd CSS类的基本机制。
Event.observe(window, 'load', function() {
//When the window loads, iterate over all of the appropriate <a> tags
$$('#productNav li a').each( function(elem) {
//Handle the click event on each a tag
Event.observe(elem, 'click', function(event) {
//Remove the selectedProd class from all <a> tags
$$('#productNav li a').each( function(elem) {
elem.removeClassName('selectedProd');
});
//Add the selectedProd class to the <a> tag that was clicked
this.addClassName('selectedProd');
//Stop the browser from following the link specified in the href=""
Event.stop(event);
});
});
});Stack Overflow用户
发布于 2009-07-13 18:11:36
虽然我正在思考这个问题，Mark已经回答了，但我想出了以下几点：
$$("#productNav li a").observe('click', function(event){
$$("#productNav li a").invoke('removeClassName', 'selectedProd'));
$$("#productListCntnr > ul").invoke('SlideUp',{ duration: 3.0 });
Event.element(event).invoke('addClassName', 'selectedProd'));
$$("#productListCntnr > ul#"+Event.element(event).id).invoke('SlideDown',{ duration: 3.0 });
});SlideUp和SlideDown方法来自脚本，不确定它们是否与jQuery效果直接兼容。我还假设您在最后一行中指的是ul#，因为您是按ID选择的，在这种情况下，由于ID无论如何都是唯一的，所以您可能会这样做：
Effect.SlideDown(Event.element(event).id, { duration: 3.0 });--编辑
在Mark的评论之后，我在一个实际的浏览器中尝试了上面的代码，下面是一个工作版本：
Event.observe(window, 'load', function() {
$$("#productNav li a").invoke('observe', 'click', function(event){
$$("#productNav li a.selectedProd").invoke('removeClassName', 'selectedProd');
Event.element(event).addClassName('selectedProd');
Effect.Pulsate(Event.element(event).id, { pulses: 5, duration: 3.0 });
});
});我不确定SlideUp应该做什么，所以我把它拿出来了，我猜它不是在productNav中操作相同的列表元素？SlideDown似乎也没有做任何事情，可能是因为SlideUp不见了，所以我把它换成了Pulsate，只是为了确认它是有效的。我不得不使用我上面提到的替代语法，因为原来的语法根本不起作用(得到了一个错误，如invoke method不存在于元素上)。
我猜原始代码的目的是为了SlideUp和SlideDown一个独立于菜单项的内容区域？在这种情况下，必须更改此代码，但原始html也将是无效的，因为它将暗示菜单中的列表项和内容区域中的列表项具有相同的In。作为参考，我的HTML是这样的：
<ul id="productNav">
<li><a id="p1" href="#">Product 1</a></li>
<li><a id="p2" href="#">Product 2</a></li>
<li><a id="p3" href="#">Product 3</a></li>
<li><a id="p4" href="#">Product 4</a></li>
<li><a id="p5" href="#">Product 5</a></li>
<li><a id="p6" href="#">Product 6</a></li>
</ul>https://stackoverflow.com/questions/1119435
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号