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 は #row8 まで #row3 を非表示にし、3 つの見出しがそれぞれ #row0、#row1、#row2 に入力されます。td は、行の中で最も長い td のサイズを取ります。コードのこの部分は機能します。また、2 つの Javascript 関数があります。1 つは td の上にマウスを移動するためのもので、もう 1 つは td をクリックしたときのためのものです。tdにカーソルを合わせると、Javascriptが次のように始まります

$('#sideTable td').hover(

tdをクリックすると、Javascriptが次のように始まります

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

問題は、単語にカーソルを合わせたときのホバー機能は完璧ですが、td をクリックしようとすると、td の幅が非常に長い場合でも、td 内に多くの情報があることです (情報を言うtd では、td の幅が 200px になるほど長いため、td の最初の 85px しかクリックできません。それはとても奇妙です。しても

#sideBar td {
    width: 120px;
}

すべての td の幅を 120px にしても、td の最初の 85px しかクリックできません。ホバリングは完璧です。ホバーする場所に関係なく (td の最初の 85px 内にあるかどうかに関係なく)、td にホバーした瞬間、td の長さに関係なく、ホバー機能が機能し、完全に実行されます。 . しかし、何らかの理由で、クリック機能では見出しの最初の 85 ピクセル程度しかクリックできません。どうしてこれなの？

注：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;
}

また、私は CSS3 ではなく I.E8 を使用していることと、私が書いた JS がたくさんあり、非常に面倒なので、アップロードすると、このスレッドに反対票が投じられることに注意してください。ただし、JS は TD の幅などには実際には影響しません。「td がホバーされている場合はこれをすべて実行し、td がクリックされている場合はこれを実行する」だけです。問題はJSコードではなく、tdがそれより長いかどうかに関係なく、「tdがクリックされた場合」がtdの最初の85px程度でのみ機能するだけです。

4

1 に答える 1

0

オーバーフローを処理するように CSS を編集してみてください。

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

jqueryの問題ではなく、CSSのように聞こえます。要素を調べて、マウスが td の幅全体に収まるかどうかを確認します。

于 2013-10-31T19:13:53.843 に答える