Question

我正在尝试制作类似于this的动态导航菜单。 javascript是here，当我使用它进行测试时效果很好：

<div id='nav'>
        <ul>
            <li class="navHeader">OOC</li>
            <li><a href='#'>Home</a></li>
            <li class='active'><a href='#'>Products</a>
                <ul>
                    <li><a href='#'>Product 1</a>
                        <ul>
                            <li><a href='#'>Sub Product</a></li>
                            <li><a href='#'>Sub Product</a></li>
                        </ul>
                    </li>

                    <li><a href='#'>Product 2</a>
                        <ul>
                            <li><a href='#'>Sub Product</a></li>
                            <li><a href='#'>Sub Product</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

但是，我尝试将导航内容切换为：

<div id='nav'>
        <ul>
            <li class="navHeader">OOC</li>
            <?php echo getNav(); ?>
        </ul>
    </div>

PHP：

function formatNav($navPg){
    $navLine = "<li><a href='?pg=".$navPg['url']."'>".$navPg['name']."</a></li>";
    if ($navPg['subPgs'] > 0) {
        $navLine .= "<ul>";
        foreach($navPg['subPgs'] as $subPg) {
            $navLine .= formatNav($subPg);
        }
        $navLine .= "</ul>";
    }
    return $navLine;
}

function getNav(){
        $navPgs = array(array(
                            'name'=>'profile',
                            'url'=>'profile',
                            'subPgs'=>array(
                                array(
                                    'name'=>'subaccounts',
                                    'url'=>'profile&cat=subs',
                                    'subPgs'=>''
                                ),
                                array(
                                    'name'=>'options',
                                    'url'=>'profile&cat=opts',
                                    'subPgs'=>''
                                )
                            )
                        )
                    );

    $finalNav = "";
    foreach($navPgs as $navPg){
        $finalNav .= formatNav($navPg);
    }
    return $finalNav;
}

并没有Javascript在其上运行。

JS不会将类has-sub添加到具有子菜单的li元素。在PHP中添加has-sub的元素正确显示其CSS但不执行下拉事件。我调试了JS中<ul>之后找到的cssmenu.find('li ul').parent().addClass('has-sub');元素列表，它不包括PHP生成的元素。

我调试了PHP输出，它是一组完美的li和ul元素，就像我手工格式化它们一样。 JS本身工作正常，PHP本身工作正常，但是当我尝试将它们组合起来时，JS就失败了。

有人有the same problem here，但答案没有帮助。我可以改变我的实现，根据JSON的质量列表在javascript中动态构建列表元素，但我想知道为什么我必须这样做，而不是直接从PHP回显它们，特别是如果有更直接的解决方法。

在$(document).ready之后运行的PHP是否会以某种方式触发，即使它在服务器端运行？

JS运行客户端，但是从服务器端脚本输出的有效DOM元素应该与客户端创建的DOM元素无法区分。正确？

为什么不是这个？

编辑：PHP本身输出的图片。它似乎没有任何问题。

Answer 1

该功能不会生成相同的结构，这可能是问题。

我已经调整了你的函数以返回与工作相同的结构。

试一试。

<?php
function formatNav($navPg){
    $navLine = "<li><a href='".$navPg['url']."'>".$navPg['name']."</a>";
    if (is_array($navPg['subPgs']) && count($navPg['subPgs']) > 0) {
        $navLine .= "<ul>";
        foreach($navPg['subPgs'] as $subPg) {
            $navLine .= formatNav($subPg);
        }
        $navLine .= "</ul>";
    } else {
        $navLine .= "</li>";
    }
    if (is_array($navPg['subPgs']) && count($navPg['subPgs']) > 0) {
        $navLine .= "</li>";
    }
    return $navLine;
}

function getNav(){
    $navPgs = array(
        array(
            'name'=>'Home',
            'url'=>'#',
            'subPgs'=>array()
        ),
        array(
            'name'=>'Products',
            'url'=>'#',
            'subPgs'=>array(
                array(
                    'name'=>'Product 1',
                    'url'=>'#',
                    'subPgs'=>array(
                        array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),
                    )
                ),
                array(
                    'name'=>'Product 2',
                    'url'=>'#',
                    'subPgs'=>array(
                        array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),
                    )
                )
            )
        )
    );

    $finalNav = "";
    foreach($navPgs as $navPg){
        $finalNav .= formatNav($navPg);
    }
    return $finalNav;
}

https://3v4l.org/gjM0Y

<div id='nav'>
   <ul>
      <li class="navHeader">OOC</li>
      <li><a href='#'>Home</a></li>
      <li>
         <a href='#'>Products</a>
         <ul>
            <li>
               <a href='#'>Product 1</a>
               <ul>
                  <li><a href='#'>Sub Product</a></li>
                  <li><a href='#'>Sub Product</a></li>
               </ul>
            </li>
            <li>
               <a href='#'>Product 2</a>
               <ul>
                  <li><a href='#'>Sub Product</a></li>
                  <li><a href='#'>Sub Product</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>

为什么这个jQuery不会影响从PHP输出的元素，只有HTML中定义的元素？

1 个答案: