[英]How to expand table row height when div height expands
I have a jQuery script with expands a div in a table on click, however the table row doesn't expand with the div! 我有一个jQuery脚本,可在单击时在表中扩展div,但是表行不会随div扩展!
Any help much appreciated, 任何帮助表示赞赏,
this is my Jquery: 这是我的jQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".expanderHead").click(function(){
var $exsign = $("#expanderSign");
$(this).find("#expanderContent").slideToggle();
$exsign.html($exsign.text() == '+' ? '-': '+');
// simplify your if/else into one line using ternary operator
// if $exsign.text() == "+" then use "-" else "+"
});
});
</script>
This is my table code: 这是我的表代码:
echo "<table width='50%' style='border-bottom:1px solid #000000;'>";
echo "<tr>";
echo "<td>";
echo "<div id='page-wrap'>";
echo "<div class='discounted-item freeshipping'>";
echo "<a href='./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "' rel='lightbox'><img src=\"./img/users/" . $row['category'] . "/" . $row['username'] . "/" . $row['filename'] . "\" alt=\"\" width='15%' height='80%' /></a>";
echo "<div class='expanderHead'>";
echo "<div class='reasonbar'><div class='prod-title'>" .$row['fname'] . "</div><div class='reason' style='width: 29%;'><b>". $row['firstname'] . " " . $row['surname'] ."</b></div></div>";
echo "<div id='expanderContent' style='display:none'><div class='reasonbar'><div class='prod-title1' style='width: 70%;'>" . $row['lname'] . "</div><div class='reason1' style='width: 29%;'>Category:<br /> ". $row['category'] . "</div></div></div>";
echo "<div class='reasonbar'><div class='prod-title2' style='width: 70%;'><a href='#'>Click here For more info</a></div><div class='reason2' style='width: 29%;'>Price: £". $row['price'] . "</div></div>";
echo "</td>";
echo "</tr>";
echo "</td>";
echo "</tr>";
echo "</div>";
echo "</table>";
this is my CSS: 这是我的CSS:
.discounted-item { width: 100%; position: relative; cursor: pointer;
height: 90px; }
.discounted-item:hover { background-color:#FC6;}
.discounted-item img { position: absolute; top: 0; left: 0; }
.freeshipping .reasonbar { background: url(); }
.freeshipping { background: ; }
.reasonbar { padding: 4px 0 4px 175px; overflow: hidden;
width: 515px; color: black; font-size: 10px; }
.reason { width: 49%; float: right; text-align: right; text-transform: uppercase;
letter-spacing: 2px; padding: 0 5px 0 0; font-size: 10px; }
.reason1 { float: right; text-align: right; text-transform: uppercase;
letter-spacing: 2px; }
.reason2 { float: right; text-align: right; text-transform: uppercase;
letter-spacing: 2px; font-family: Tahoma, Geneva, sans-serif; font-style: italic; font-size: 14px;}
.reason3 { float: right; text-align: right; text-transform: uppercase;
letter-spacing: 2px; font-family: Tahoma, Geneva, sans-serif; font-style: italic; font-size:12px; }
.prod-title { width: 49%; float: left; font: bold 14px Helvetica, Sans-Serif; }
.prod-title1 { width: 49%; height: 90px; float: left; font: 12px "Lucida Grande", Arial, Sans-Serif; }
.prod-title2 { width: 49%; height: 20px; float: left; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal; }
.prod-title2 { width: 49%; height: 20px; float: left; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal; }
.discount-bar { width: 59%; height: 70px; background-color:yellow; padding: 10px 0 10px 150px; font: 18px "Lucida Grande", Arial, Sans-Serif; text-overflow:ellipsis; overflow:hidden; white-space:normal;}
As far as I can see, the code is working properly-the div "expanderContent" expands and also changes its dimensions. 据我所知,代码可以正常工作-div“ expanderContent”会扩展并更改其尺寸。 Which browser are you performing the tests?
您在哪个浏览器上执行测试?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.