我在这里试过这个:http: //jsfiddle.net/92HXT/1/但它不起作用。仅当我使用show("slow")
/时才有效hide("slow")
。
谢谢。
我在这里试过这个:http: //jsfiddle.net/92HXT/1/但它不起作用。仅当我使用show("slow")
/时才有效hide("slow")
。
谢谢。
虽然不是最清晰的动画,但我通过找到父级并隐藏所有兄弟级,让它按照我认为你想要的方式运行。我还不确定为什么这会将元素滑到左侧,而直接调用.siblings()
似乎没有。
看到这里。
正如其他人所提到的,使用类来识别一组项目是正确的方法,而不是通过 ID。
更新:
虽然我仍然不确定为什么siblings() 找不到您通过ID 找到的div 的兄弟姐妹,但我怀疑它与显示/隐藏甚至可能使用滑动动画的过程有关. 这是我建议的 jQuery/jQueryUI:
$('a.view-list-item').click(function () {
var divname= this.name;
$("#"+divname).show("slide", { direction: "left" }, 1000);
$("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000);
});
这是更新的版本。
更新:
@jesus.tesh 对解决方案的出色更新
更新:
@erwinjulius 对解决方案的行为更新。我更改了 DIV 的定位,使其表现更好,允许用户快速单击链接而不会破坏动画。添加白色背景和左填充只是为了更好的效果呈现。
但是,此代码有效,元素中的名称标签已过时 W3C 标准。
我尝试使用 ID 不起作用,然后我将名称标签更改为标题,这也有效,并且您符合 W3C 标准!
因此,像这样将“名称”更改为“标题”,它的功能很棒,请参见此处:http ://design65grafischontwerp.nl/#portfolio
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
var divtitle = this.title;
$("#" + divtitle).show("slow").siblings().hide(1000);
});
});
</script>