使用 jQuery 绑定，但不包含锚点
更新：链接现在可以使用，但箭头仍然有问题。
我正在处理 http://www.boulderdispensaries.com/
在地图下方，如果您点击一行，您会看到它下面的行出现。即使您连续单击一个链接。另外，如果单击一行，然后单击上面的行，右箭头不会向下转动。我该如何解决这个问题，以便单击连续的链接即可转到该链接，并且箭头可以正常工作？
对于小提琴手： http://jsfiddle.net/yFkNf/
我还粘贴了下面的代码。
jQuery：
$(document).ready(function() {
var hideText='<img src="arrow-down.gif" width="10" height="10" border="0" alt="v">';
var showText='<img src="arrow-right.gif" width="10" height="10" border="0" alt=">">';
var is_visible = false;
$('tr:odd td').addClass('expand');
// this is the hack I was using to get the links to work, but then the bind doesn't
// $('tr:odd td:nth-child(1)').removeClass('expand');
// $('tr:odd td:nth-child(2)').removeClass('expand');
// $('tr:odd td:nth-child(4)').removeClass('expand');
$('tr:odd td:first-child').prepend('<a href="#" class="toggleLink">'+showText+'</a> ');
$('.toggle').hide();
$('a.toggleLink').click(function() {
is_visible = !is_visible;
$(this).html( (!is_visible) ? showText : hideText);
$(this).parent().parent().next('tr').toggle();
return false;
});
$('.expand').click(function(){
is_visible = !is_visible;
$(this).parent().find('a.toggleLink').html( (!is_visible) ? showText : hideText);
$(this).parent().next('tr').toggle();
return false;
});
});
这是每两行的格式：
<tr>
<td><a href="http://www.boulderkindcare.org/">Boulder Kind Care</a></td>
<td><a href="http://maps.google.com/etc">2031 16th</a></td>
<td>(720) 235-4232</td>
<td><a href="mailto:[email protected]"><img src="email_icon.gif" /></a></td>
<td nowrap="nowrap"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr class="toggle">
<td colspan="8">More info coming soon.</td>
</tr>
Update: the links now work, but the arrows are still problematic.
I'm working on http://www.boulderdispensaries.com/
Below the map, if you click on a row, you see the row below it appear. Even if you click a link in a row. Also, if you click a row, then click the row above, the right arrow doesn't turn down. How can I fix it so clicking a link in a row goes to the link, and the arrows function properly?
For the fiddlers: http://jsfiddle.net/yFkNf/
I have also pasted the code below.
jQuery:
$(document).ready(function() {
var hideText='<img src="arrow-down.gif" width="10" height="10" border="0" alt="v">';
var showText='<img src="arrow-right.gif" width="10" height="10" border="0" alt=">">';
var is_visible = false;
$('tr:odd td').addClass('expand');
// this is the hack I was using to get the links to work, but then the bind doesn't
// $('tr:odd td:nth-child(1)').removeClass('expand');
// $('tr:odd td:nth-child(2)').removeClass('expand');
// $('tr:odd td:nth-child(4)').removeClass('expand');
$('tr:odd td:first-child').prepend('<a href="#" class="toggleLink">'+showText+'</a> ');
$('.toggle').hide();
$('a.toggleLink').click(function() {
is_visible = !is_visible;
$(this).html( (!is_visible) ? showText : hideText);
$(this).parent().parent().next('tr').toggle();
return false;
});
$('.expand').click(function(){
is_visible = !is_visible;
$(this).parent().find('a.toggleLink').html( (!is_visible) ? showText : hideText);
$(this).parent().next('tr').toggle();
return false;
});
});
Here's the format of every two rows:
<tr>
<td><a href="http://www.boulderkindcare.org/">Boulder Kind Care</a></td>
<td><a href="http://maps.google.com/etc">2031 16th</a></td>
<td>(720) 235-4232</td>
<td><a href="mailto:[email protected]"><img src="email_icon.gif" /></a></td>
<td nowrap="nowrap"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr class="toggle">
<td colspan="8">More info coming soon.</td>
</tr>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
对于无代码响应表示抱歉：
要使链接正常工作，我相信您只需从点击处理程序中删除
return false即可。我认为该行明确告诉链接不起作用。箭头的问题是你的状态变量 is_visible 是全局的（顺便说一句你应该避免），所以每一行都共享相同的变量。最好将该状态存储在 tr 上的一个类中，然后在单击时检查它。或者也许更好的是根据该类为“可见”行提供不同的处理程序。
Sorry for the codeless response:
To get the links working correctly, I believe you just need to remove
return falsefrom your click handler. I think that line is explicitly telling the links not to work.Your problem with the arrows is that your state variable
is_visibleis global (which you should avoid btw), so every row is sharing the same variable. It would be better to store that state in a class on the tr, then check for it onClick. Or maybe better yet have a different handler for the 'is visible' rows based on that class.这将防止 TD 内的锚链接点击向上冒泡到 TD。您可能想让选择器变得不那么通用；您没有提供足够的信息让我无法正确定位它。
箭头
您使用全局变量来存储某个项目是否展开，但可以同时展开多个项目。本质上，您需要将此详细信息存储在切换链接上，或者从该上下文中找到另一种方法来了解正在展开的行的状态。
That will prevent anchor link clicks inside the TD from bubbling up to the TD. You'll probably want to make the selector a little less generalized; you didn't give enough information for me to specifically target it properly.
Arrows
You're using a global variable to store whether or not an item is expanded, but multiple items can be expanded at once. Essentially, you need to store this detail on the toggle link, or find another way from within that context to know the status of row being expanded.