[英]hide/show not working properly with jquery
我有一个包含三行主要信息的页面,所有信息都附加了“更多信息”按钮,类似于wefollow.com及其信息按钮。
单击“更多信息”链接时,带有“ mi”类的<tr>
向下滑动到主要信息上方。
我遇到的问题是在单击“更多信息”链接之前隐藏了<tr>
。 <tr>
只是空白。 <tr>
中的信息被jQuery隐藏(下面的脚本),然后在单击“更多信息”时显示。
我尝试使用CSS隐藏“ mi”,但是当单击“更多信息”按钮时,没有任何反应。
任何帮助都是极好的。 谢谢。
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td>
<div id="1" class="more-information" />
</td>
</tr>
<tr class="">
<td> </td>
<td> </td>
<td> <a id="1" class="more-info" href="#">More info</a> </td>
</tbody>
</table>
$(function(){
$(".more-information").hide();
$(".more-info").click(function () {
var divname= this.id;
$("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});
第一个问题是您要重复ID。 它们必须是唯一的。 毫无疑问,这会使您的代码中断。
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td><div id="more-1" class="more-information">More information</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a id="1" class="more-info" href="#">More info</a></td>
</tr>
</tbody>
</table>
结合:
$(function() {
$("a.more-info").click(function() {
$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
});
});
不确定为什么需要在上面隐藏同级。
另外,我不会在jquery中隐藏“更多信息” div。 只需为此添加CSS:
div.more-information { display: none; }
您正在隐藏more-information
div,但没有隐藏其父元素(类mi
的<tr>
。 尝试将id
属性放在<tr>
而不是封闭的div中,然后隐藏整行。 另外,您还必须听从有关不重复id和不必要的同级隐藏的建议。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.