2

この質問は、解決すべき興味深い問題かもしれません... テキストを表示する Web ページでは、特定の動作が必要です。ユーザーが特別な単語をクリックすると、クリックした単語のすぐ下にこの単語の説明が開きます。すべての問題は、次の行にジャンプするために続くテキストを作成せずに、段落を2つに「開く」など、単語の下で実際に開く必要があることです。

CSS float プロパティを使用して、非常にうまく機能するソリューションを見つけました。そこで見ることができます（以下のコードよりも多くのことを話します）：http://jsfiddle.net/3gwzx/3/

このソリューションの主な問題は、ネストされたスパンを使用することです。また、span はブロック タグではないため、パディングは機能しません。したがって、灰色のボックス内では、テキストに水平方向のパディングはありません(垂直方向のパディングは問題ありません)。それ以外の場合は、ボックス自体のサイズが変更されます。- そして、それは悪いです。誰かが解決策を持っていますか? まったく別の方法で問題を再考する必要がありますか?

どうもありがとうございました！

HTML は次のようになります。

<body onload="putListeners()">

<p>This is the normal text here, you cannot click it. But some words needs long
explanations, like this one : <span class="note">click on me

    <span class="noteTxt">The explanation begins here <a class="foo" href="bar.html"> and
    could have link</a> that one should be able to click. 
    And the note can be loooong, long, long, very, very long.
    </span>
  </span> 

And here, the text carry on. It could carry on for a long, long time.
And with all the other solutions I tried, this part of the text "jumps" after the note,
on a new line, when it appears. What I like here is that, when you open the note, 
it really "open the paragraphs in two". But i cannot give a padding
to those nested span… I should have a div… but you cannot put a div 
inside a span !</p>

</body>

JSはこちら

function putListeners() {

    //just listens to the text…
    var elements = document.getElementsByClassName("note");
    for (var i = 0; i < elements.length; i++) {
       elements[i].addEventListener("click", showNote, false);
    }

};

function showNote()
{
    //content to show
    var currentTxt;

    //finds the nested noteTxt
    for (var i = 0; i < this.childNodes.length; i++) {
        if (this.childNodes[i].className == "noteTxt") {
          currentTxt = this.childNodes[i];
         break;
      }        
    }

    //displays it or hides it
    if(currentTxt.style.display=="none" || currentTxt.style.display=="")
        {

            currentTxt.style.display="block";

        }
        else
        {
            currentTxt.style.display="none";
        }

     return true;
};

そして、情報として、CSS の関連部分 (おそらく、それがどのように見えるかを理解したでしょう - Jfiddle の完全なコード):

span.note {
    position: static;
}

span.note span.noteTxt {
    display: none;
    float: left;
    color: black;
    width: 100%;
    background-color: #eaeaea;
}
4

1 に答える 1