很明显,我的脚本适用于一个班级。但它并不适用于几个具有相同意图的课程。我尝试将div(#panel)放入类(.panel),因为我正在使用几个类。但它仍然无法正常工作。你们有没有解决方案吗?这是我的jsfiddle,所以你能看出问题所在。 http://jsfiddle.net/2FPZE/1/
这是html
<div class="more-link"> more </div>
<div class="panel">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="more-link"> more </div>
<div class="panel">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
这是我的剧本
$(document).ready(function(){
$(".more-link").click(function(){
$(".panel").slideDown("slow");
$(".more-link").remove();
});
});
我的css
.panel {
display:none;
}
答案 0 :(得分:5)
您必须将.panel
相对于点击的.more-link
定位。
在点击事件中,this == .more-link
。
所以你可以这样做:
$(document).ready(function () {
$(".more-link").click(function () {
$(this).next(".panel").slideDown("slow")
.end().remove();
});
});
小提琴:http://jsfiddle.net/2FPZE/5/
<强> .next() 强>
<强> .end() 强>
此代码适用于您当前的DOM。但是,如果您在链接和文本之间插入内容,则需要更改代码。
答案 1 :(得分:0)
你是如何在JSFiddle上测试它的?第一关,你甚至没有设置JQuery Framwork
请参阅,未选择任何内容,那么您希望如何解雇此事件?
此代码适用于两个链接
$(".more-link").click(function () {
$(".panel").slideDown("slow");
$(".more-link").remove();
});
请记住,不要在JSFiddle中包含$(document).ready(function () {});
,不需要包含