显示并隐藏div点击图片？
问题描述：
我想在html和javascript中点击+图片来显示和隐藏div。 它正在工作，但问题是，我想隐藏页面加载的子div。显示并隐藏div点击图片？
当我将$(".sub").hide();添加到内部脚本中时，子div在页面加载时隐藏，但+标志的那个按钮图像在它正常工作后不能用于前两次。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<body>
<table data-toggle="table" data-url="tables/data1.json"
data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1"
data-pagination="true" data-sort-name="name"
data-sort-order="desc">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="state" data-sortable="true">Category Name</th>
<th data-field="state" data-sortable="true">Product Image </th>
<th data-field="state" data-sortable="true">Product Name </th>
<th data-field="state" data-sortable="true">Seller Name</th>
<th data-field="state" data-sortable="true">Price</th>
<th data-field="state" data-sortable="true">Last Price 1</th>
<th data-field="state" data-sortable="true">Last Price 2</th>
<th data-field="state" data-sortable="true">Seller Rating</th>
</tr>
</thead>
<tr>
<td><img src="http://www.bls.gov/images/icons/icon_small_plus.gif"
class="image1" id="image1" onclick=diffImage(this) /></td>
<td><p>a </p></a></td>
<td><img src="http://www.thatpetplace.com/c.1043140/site/img/photo_na.jpg"
style="width:100px;height:100px;"/></td>
<td><p>b</p></a></td>
<td><p>c</p></td>
<td><p>d</p></td>
<td><p>e</p></td>
<td><p>f</p></td>
<td><p>g</p></td>
<td>
<a href="/change" name ='i'>
<i class="fa fa-trash-o fa-fw" ></i> Delete </a>
</td>
</tr>
<div id= "sub" class="sub">
<tr class="sub" id="fd" >
<td></td><td></td>
<td></td>
<td colspan="6">
<table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3" >
<!-- <th class = "tab">Product Image </th> -->
\t <th class = "tab">Product Name </th>
\t <th class = "tab">Seller Name</th>
\t <th class = "tab">Price</th>
\t <th class = "tab">Last Price 1</th>
\t <th class = "tab">Last Price 2</th>
<th class = "tab">Seller Rating</th>
<tr>
<td>
\t \t <a href="ffds"><p>a</p></a>
\t \t </td>`
\t <td>
\t \t <p class = "tab">b</p>
\t \t </td>
\t <td>
\t \t <p class = "tab">c</p>
\t \t </td>
\t <td>
\t \t <p class = "tab">d</p>
\t \t </td>
\t <td>
\t \t <p class = "tab">e</p>
\t \t </td>
\t <td>
\t \t <p class = "tab">f</p>
\t \t </td>
\t <td>
\t \t <a href="/change_sub" name = "g" onclick="location.href=this.href+'?key=<%= doc[e]._id %>';return false;">
<i class="fa fa-trash-o fa-fw"></i> Delete </a>
\t </td>
</tr>
</table>
</td>
</tr>
</div>
</table>
<script>
$(".sub").hide();
function diffImage(img)
{
if(img.src.match("http://olenka.med.virginia"))
{
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(".image1").click(function()
{
$(this).closest('tr').next('.sub').hide();
\t \t \t });
\t }
else
{
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
\t $(".image1").click(function(){
\t \t \t \t $(this).closest('tr').next('.sub').show();
\t \t \t \t \t });
\t }
}</script>
</body>
答
在你现在的代码，你要添加新的onclick处理器，当您单击image。你可以根据img的src添加不同的处理程序。原因是，您需要点击至少两次，然后事件才能正常运行，第一次添加隐藏事件，添加演出事件的时间，等等。
请注意，注册一个新事件不会覆盖前一个，它似乎正常工作，因为它通过注册顺序执行处理程序，所以添加奇怪的点击，您注册一个新的hide，这将被称为最后，并在甚至时间，你注册一个show。它只是让你在你的页面注册越来越多的事件，应该避免。
你只需要删除寄存器部分，并将隐藏和显示逻辑移出，它应该工作正常。 。
function diffImage(img) {
if(img.src.match("http://olenka.med.virginia")) {
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(img).closest('tr').next('.sub').hide();
} else {
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
$(img).closest('tr').next('.sub').show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<table data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="state" data-sortable="true">Category Name</th>
<th data-field="state" data-sortable="true">Product Image</th>
<th data-field="state" data-sortable="true">Product Name</th>
<th data-field="state" data-sortable="true">Seller Name</th>
<th data-field="state" data-sortable="true">Price</th>
<th data-field="state" data-sortable="true">Last Price 1</th>
<th data-field="state" data-sortable="true">Last Price 2</th>
<th data-field="state" data-sortable="true">Seller Rating</th>
</tr>
</thead>
<tr>
<td>
<img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick=diffImage(this) />
</td>
<td>
<p>a</p>
</a>
</td>
<td>
<img src="http://www.thatpetplace.com/c.1043140/site/img/photo_na.jpg" style="width:100px;height:100px;" />
</td>
<td>
<p>b</p>
</a>
</td>
<td>
<p>c</p>
</td>
<td>
<p>d</p>
</td>
<td>
<p>e</p>
</td>
<td>
<p>f</p>
</td>
<td>
<p>g</p>
</td>
<td>
<a href="/change" name='i'> <i class="fa fa-trash-o fa-fw"></i> Delete</a>
</td>
</tr>
<div id="sub" class="sub">
<tr class="sub" id="fd">
<td></td>
<td></td>
<td></td>
<td colspan="6">
<table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3">
<!-- <th class = "tab">Product Image </th> -->
<th class="tab">Product Name</th>
<th class="tab">Seller Name</th>
<th class="tab">Price</th>
<th class="tab">Last Price 1</th>
<th class="tab">Last Price 2</th>
<th class="tab">Seller Rating</th>
<tr>
<td>
<a href="ffds">
<p>a</p>
</a>
</td>
<td>
<p class="tab">b</p>
</td>
<td>
<p class="tab">c</p>
</td>
<td>
<p class="tab">d</p>
</td>
<td>
<p class="tab">e</p>
</td>
<td>
<p class="tab">f</p>
</td>
<td>
<a href="/change_sub" name="g" onclick="location.href=this.href+'?key=<%= doc[e]._id %>';return false;"> <i class="fa fa-trash-o fa-fw"></i> Delete</a>
</td>
</tr>
</table>
</td>
</tr>
</div>
</table>
<script>
$(".sub").hide();
function diffImage(img) {
if(img.src.match("http://olenka.med.virginia")) {
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(img).closest('tr').next('.sub').hide();
} else {
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
$(img).closest('tr').next('.sub').show();
}
}
</script>
</body>
试试这个'$（ “子”）切换（）;' –