2

javascriptでドロップダウンjavascriptメニューを動的に作成したい。

私は mysql db から php でメニュー項目の javascript 配列を作成しましたが、今は javascript 関数を使用していつでもその場でメニューを作成したいので、サーバーを使用せずにメニューの項目を更新できます電話。

メニューは正常に構築され、ロードされますが、ドロップダウンは機能しません

これは私のコードです

配列を作成するためのphpコード

   <script>
     var x=0;
     var outermenuarray=new Array();
    </script>
    <?
    $sql=mysql_query("SELECT * FROM pages WHERE template_ref='15' ORDER BY menu_pos ASC");               
    while($row=mysql_fetch_array($sql))
      {   
      ?>
      <script>
        var innermenuarray = new Array();
        innermenuarray[0]="<? echo $row['page_ref']; ?>";
        innermenuarray[1]="<? echo $row['menu_pos']; ?>";
        innermenuarray[2]="<? echo $row['sub_menu_pos']; ?>";
        innermenuarray[3]="<? echo $row['top_menu']; ?>";
        innermenuarray[4]="<? echo $row['link']; ?>";
        innermenuarray[5]="<? echo $row['indexpage']; ?>";                   

        outermenuarray[x]=innermenuarray;               
        x++;
      </script>
     <?
      }
     ?>

ドロップダウンメニューのCSS

    #jsddm{ 
      margin: 0;
      padding: 0
    }

    #jsddm li{
      float: left;
      list-style: none;
      font: 12px Tahoma, Arial
    }

    #jsddm li a{    
      display: block;
      background: #20548E;
      padding: 5px 12px;
      text-decoration: none;
      border-right: 1px solid white;
      width: 70px;
      color: #EAFFED;
      white-space: nowrap
    }

    #jsddm li a:hover{
      background: #1A4473
    }

    #jsddm li ul{   
        margin: 0;
        padding: 0;
        position: absolute;
        visibility: hidden;
        border-top: 1px solid white
    }

    #jsddm li ul li{
      float: none;
      display: inline
    }

    #jsddm li ul li a{  
      width: auto;
      background: #9F1B1B
    }

    #jsddm li ul li a:hover{
      background: #7F1616
    }

メニューのJavaScript

    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    function jsddm_open()
    {  jsddm_canceltimer();
       jsddm_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

    function jsddm_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

    function jsddm_timer()
    {  closetimer = window.setTimeout(jsddm_close, timeout);}

    function jsddm_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}

    $(document).ready(function()
    {  $('#jsddm > li').bind('mouseover', jsddm_open)
       $('#jsddm > li').bind('mouseout',  jsddm_timer)});

    document.onclick = jsddm_close;

そして最後に、メニューを構築するためのループ

    var innermenuhtml;
    function createtopmenu(){
    innermenuhtml='<ul id="jsddm">';
    var t=0;
    var s=0;
    for(var h = 0; h <outermenuarray.length; h++)
        {
            if(outermenuarray[h][2]=='0'){
                if(t>0){ 
                    innermenuhtml+='</li>';                         
                }
                t++;

                if(s>0){ 
                    innermenuhtml+='</ul>';             
                }
                s=0;
                innermenuhtml+='<li><a href="#">'+outermenuarray[h][4]+'</a>';
            }else{
                 if(s==0){ 
                    innermenuhtml+='<ul>';              
                    s++;
                }
                innermenuhtml+= '<li><a href="#">'+outermenuarray[h][4]+'</a></li>';
            }                  
        }

    innermenuhtml+='</ul>';

    }

次に、関数を呼び出してメニューを作成し、div にプッシュします。

    <div id="topmemnuitem"></div>
    <script>
    createtopmenu();
    $(document).ready(function() {
    var el = document.getElementById('topmemnuitem');
    el.innerHTML = innermenuhtml;
    });
    </script>

ループの結果をメニューにハードコーディングすると、ドロップダウンは正常に機能しますが、ループでビルドするとドロップダウンは機能しません

誰かが理由を知っていますか？これが機能しない理由がわかりません

4

2 に答える 2

0

メニューはいつ作成されますか？それはバインドを呼び出す前ですか、それとも後ですか?

.bind() に関する jQuery ドキュメントの一部: jQuery 1.7 の時点で、.on() メソッドは、イベント ハンドラーをドキュメントにアタッチするための推奨される方法です。以前のバージョンでは、.bind() メソッドを使用して、イベント ハンドラーを要素に直接アタッチしていました。ハンドラーは、jQuery オブジェクトで現在選択されている要素に関連付けられているため、.bind() への呼び出しが発生した時点でそれらの要素が存在している必要があります。より柔軟なイベント バインディングについては、.on() または .delegate() でのイベント委任の説明を参照してください。

=======

使用する：

$(document).on('mouseover', '#jsddm > li', jsddm_open);
$(document).on('mouseout', '#jsddm > li', jsddm_timer);

代わりに、#jsddm 内で動的に作成されたそれぞれの li がバインドされます。

=======

お役に立てて嬉しいです;-)

于 2013-07-14T06:36:51.040 に答える
0

@Mark Rijsmus が投稿したヘルプを使用してこれを修正しました。基本的に私はちょうど移動しました

  var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

の中に

<div id="topmemnuitem"></div>
<script>
createtopmenu();
$(document).ready(function() {
var el = document.getElementById('topmemnuitem');
el.innerHTML = innermenuhtml;
});
</script>

el.innerHTML = innermenuhtml; の後 そしてそれはうまくいきます

于 2013-07-14T06:58:45.337 に答える