1

php echo while ループのドロップダウン div で問題が発生しました。

非表示の div を jquery で切り替えようとしていますが、ループごとに .next() が非表示の敵を取得しないという問題があります。

jquery を使ってトグル、非表示、その他の操作を行う方法は知っていますが、div が特定の場合、または少数の場合にのみ有効です。

私は .(next) jquery コードを試していましたが、それは単純な div (一方が他方の横にある) に対してのみ機能しました...しかし、エコーされた div には他の div の中にいくつかの子 div があるため、.(next) は私の非表示の div を取得しません。何も得ないでください！

シンプルな JavaScript を使用して onClick イベントをトリガーするソリューションを見つけましたが、.slideToggle("slow") 効果を追加できるように jquery に戻したいと考えています。

私は .attr(OnClick) を使用して属性を取得しようとしましたが、それを使用して、非表示の対象の div を切り替えましたが、それは起こりません... !!!

誰かがページ内のマルチプル div の恒久的な解決策を教えてくれるかどうか尋ねています...そして、2 つのボタンの非表示/表示の代わりに、1 つのボタンに戻します。

参考までに: 1 子の div id は、エコーするループごとに異なるため、jquery は目的の div を処理できます 2. PHP 部分に問題はありません...見つかったのは.next()

そして、ここに私が実験しているjavascriptの簡単なコードがあります:コードには2つのエコーループがあるので、それがどのように行われているかがわかります。私が何を意味するかを理解してください.通常、私は10ループを持っている必要があります...どうもありがとう:-) 良い一日を！

<html>
<head>
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.`enter code here`/jquery.min.js"></script>
<script type="text/javascript">

      function showHideContent(id, show)
      {
        var elem = document.getElementById(id);
        if (elem) 
        {
          if (show) 
          {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
          } 
          else
          {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
          }
        }
      }          
</script></head><body>

      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo1' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv1', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv1', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv1'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1></div>



      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo2' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv2', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv2', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv2'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1>
      </div>

</body><html>
4

2 に答える 2

0

最初に気付いた問題は、ラッパー div の ID が同じであることです。これを class="blockinfo" に変更します。また、非表示の div にも特定のクラスを指定します。

$(document).ready(function(){
  $('.blockinfo button').click(function() {
    $(this).next('.hidden').toggle();
  });
});
于 2011-04-01T00:55:06.393 に答える
0

jQuery UIアコーディオンがぴったりだとは思いませんが、 jQuery UIアコーディオンを見ることをお勧めします。スタイルをCSSに分離し、 HTML を準拠させることを検討する必要があります。

幸運を

于 2011-04-01T00:55:18.370 に答える