1

我一开始有一个空 div 的表，使用 Javascript 和 JQuery，我创建了一个作品数组，无论数组中有什么单词，我都将这些单词放入 td. 这是我的html：

<div id="sideBar">
 <table id="sideTable">
        <tr><td id='row0'></td></tr>
        <tr><td id='row1'></td></tr>
        <tr><td id='row2'></td></tr>
        <tr><td id='row3'></td></tr>
        <tr><td id='row4'></td></tr>
        <tr><td id='row5'></td></tr>
        <tr><td id='row6'></td></tr>
        <tr><td id='row7'></td></tr>
        <tr><td id='row8'></td></tr>
    </table>
</div>

和我的 Javascript 数组，如果是这样的话

var tableHeadings = ['headingOne', 'headingTwo', 'headingThree'];

然后Javascript将#row3隐藏到#row8，三个标题将分别输入#row0、#row1和#row2。td 采用行中最长 td 的大小。这部分代码有效！我还有两个 Javascript 函数，一个用于悬停在 td 上，另一个用于单击 td 时。您将鼠标悬停在 td 上的那个，Javascript 是这样开始的

$('#sideTable td').hover(

在你点击 td 的地方，Javascript 的开头是这样的

$('#sideTable td').click( function() {

问题是当你将鼠标悬停在单词上时，悬停功能是完美的，但是当我去点击td时，即使td的宽度真的很长/td里面有很多信息（说信息在 td 太长以至于 td 的宽度变成 200px)，它只允许你点击第一个我认为 85px 的 td。太奇怪了。即使我这样做

#sideBar td {
    width: 120px;
}

并使每个 td 的宽度为 120px，它仍然只允许我单击 td 的前 85px。悬停是完美的，当我悬停在 td 上的那一刻，无论我悬停在哪里（无论它是否在 td 的前 85px 内），无论 td 有多长，悬停功能都能正常工作并完美执行. 然而，由于某种原因，点击功能只允许我点击标题的前 85px 左右。为什么是这样？

注意：即使我尝试像这样使用 Javascript 设置 td 的宽度

$('td').css('width','200');

它仍然只允许我点击 td 的前 85px。如果我将鼠标悬停在 td 的其余 115px 上，光标甚至不会变为指针。由于某种原因，它没有重新识别那里有一个 td 。

CSS是这个

    #sideBar td {
    font-size: 12px;
}

#sideBar {
    position: absolute;
    top: 90px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

另请注意，我使用的是 I.E8 而不是 CSS3，而且我写了很多 JS，而且非常混乱，所以如果我上传它，这个线程会被否决。JS 并不会真正影响 TD 的宽度或任何内容，它只是“如果 td 悬停，则执行所有这些操作，如果 td 是单击，则执行此操作”。问题不在于 JS 代码，而只是“如果单击 td”仅适用于 td 的前 85px 左右，无论 td 是否长于此。

4

1 回答 1

0

尝试编辑你的 CSS 来处理溢出：

overflow-wrap: break-word
overflow-x: visible

听起来像是 CSS 的东西而不是 jquery 的问题。检查元素，看看鼠标是否甚至超过了 td 的整个宽度。

于 2013-10-31T19:13:53.843 回答