0

Javascriptを使用して、折りたたみ式のテーブルを備えたシンプルなメニューがあります。私の問題は、ブラウザーで開くと、すべてのテーブルが既に折りたたまれていることです! メニューセクションを「閉じた」状態で開き、各セクションをクリックして折りたたむにはどうすればよいですか? 私はそれがJavascriptにあることを知っていますが、私はそれに慣れていないので、我慢してください...ありがとう！

基本的なコードは次のとおりです。

<head>
<script>
function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = '';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>


<body>
<table>
<tr>
  <td>
    <p1 onClick=" doCollapse ('r1');">JQ</p>
  </td></tr>
<tr>
  <td id="r1">ver biografia</td></tr>

<tr>
  <td>
   <p2 onClick=" doCollapse ('r2');">Obras</p>
 </td>
</tr>
<tr>
<td id="r2">lista</td></tr>

<tr>
  <td>
 <p3 onClick=" doCollapse ('r3');">Exposições</p>
  </td>
</tr>
<tr>
  <td id="r3">lista</td></tr>

</table>
</body>
</code>
4

1 に答える 1

0

jqueryのようなライブラリではなく、純粋な javascript を使用しているため、要素を簡単にターゲットにするためのいくつかの変更をお勧めします。表示するアイテムと非表示にするアイテムを の中に入れてみてください。そうすることで、 の代わりにそれらのスパンに Id をspan使用して追加することができます。私の懸念は、コードにさらに多くのものが含まれているため、それらを使用するとそれらにも影響を与えることでした。これは必要なものではありません。ただし、コードにさらに多くのスパンがある場合、私のソリューションもその副作用に苦しむことに注意する必要があるため、これをライブで実装する前にこのことを考慮する必要があります。ここにコードがあり、ここでライブデモを見ることができますdocument.getElementsByTagNametdtddocument.getElementsByTagName

<head>
<script>
    function init(){
        var numberOfRows = document.getElementsByTagName('span').length;
        for (var i = 0; i < numberOfRows; i++){
       document.getElementsByTagName('span')[i].style.display = 'none';
        }

    }

function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = 'inline';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>


<body onload="init()">
<table>
<tr>
  <td>
    <p onClick=" doCollapse ('r1');">JQ</p>
  </td></tr>
<tr>
    <td><span id="r1">ver biografia</span></td></tr>

<tr>
  <td>
   <p onClick=" doCollapse ('r2');">Obras</p>
 </td>
</tr>
<tr>
<td><span id="r2">lista</span></td></tr>

<tr>
  <td>
 <p onClick=" doCollapse ('r3');">Exposições</p>
  </td>
</tr>
<tr>
    <td><span id="r3">lista</span></td></tr>

</table>
于 2012-09-30T20:11:58.777 に答える