首页 >后端开发 >php教程 >html - php级联菜单不用ajax如何实现

html - php级联菜单不用ajax如何实现

WBOY
WBOY原创
2016-06-06 20:45:591135浏览

网站导航要实现的效果类似于下图:
html - php级联菜单不用ajax如何实现
我搜索了,发现都是ajax发送请求实现联动。我的要求是不发送请求,直接在php文件或html文件里写,再通过jquery实现下拉效果。
目录导航的数组如下:level=0表示第1层,紧跟的level=1/2……表示是第1层的子菜单。

<code class="lang-php">Array
(
    [0] => Array
        (
            [cat_id] => 3
            [cat_name] => JavaScript
            [parent_id] => 0
            [level] => 0
        )

    [1] => Array
        (
            [cat_id] => 5
            [cat_name] => Jquery
            [parent_id] => 3
            [level] => 1
        )

    [2] => Array
        (
            [cat_id] => 6
            [cat_name] => JS高级
            [parent_id] => 3
            [level] => 1
        )

    [3] => Array
        (
            [cat_id] => 4
            [cat_name] => PHP
            [parent_id] => 0
            [level] => 0
        )

)

</code>

html代码如下:

<code class="lang-html"><ul id="nav">
  <li><a href="./">首页</a></li>
<?php foreach ($treelist as $v) { ?>
  <li><a href="category.php?cid=<?php%20echo%20%24v%5B'cat_id'%5D;%20?>"><?php echo $v['cat_name']; ?></a></li>
<?php } ?>
</ul>
</code>

回复内容:

网站导航要实现的效果类似于下图:
html - php级联菜单不用ajax如何实现
我搜索了,发现都是ajax发送请求实现联动。我的要求是不发送请求,直接在php文件或html文件里写,再通过jquery实现下拉效果。
目录导航的数组如下:level=0表示第1层,紧跟的level=1/2……表示是第1层的子菜单。

<code class="lang-php">Array
(
    [0] => Array
        (
            [cat_id] => 3
            [cat_name] => JavaScript
            [parent_id] => 0
            [level] => 0
        )

    [1] => Array
        (
            [cat_id] => 5
            [cat_name] => Jquery
            [parent_id] => 3
            [level] => 1
        )

    [2] => Array
        (
            [cat_id] => 6
            [cat_name] => JS高级
            [parent_id] => 3
            [level] => 1
        )

    [3] => Array
        (
            [cat_id] => 4
            [cat_name] => PHP
            [parent_id] => 0
            [level] => 0
        )

)

</code>

html代码如下:

<code class="lang-html"><ul id="nav">
  <li><a href="./">首页</a></li>
<?php foreach ($treelist as $v) { ?>
  <li><a href="category.php?cid=<?php%20echo%20%24v%5B'cat_id'%5D;%20?>"><?php echo $v['cat_name']; ?></a></li>
<?php } ?>
</ul>
</code>

不用ajax,一次把所有数据都读出来,但是hide show 的效果必须要js了,有几种方法,可以php里把数据做成json,在js里调用show hide,也可以直接把全部array先在页面上显示成link默认hide,然后根据点哪个show哪个。

---下面是把array先在页面上生成html,但是根据不同class值来判断show/hide
把每层都查出来,把原来用0、1、2的array key 改成用每组数据的属性当做可以,如下:

<code>array(
    'l1' => array(
        key1 => value1,
        key2 => value2,
        key3 => value3
    ),
    'l2' => array(
        key1 => value1,
        key2 => value2,
        key3 => value3
    )
    .......
);
</code>

给每层array key都附上值,全部生成出来,根据key value 不同在link上生成不同的class,默认全部hide,然后click哪个按钮就显示哪个吧,几个if elseif else搞定,因为每组数据都有key了,可以简单地判断哪个按钮对应那组数据。

在显示之前把它们都查出来,只是用js默认不显示它们,等点击再显示它们

不是很明确你的意思,是要实现这样无限级树形菜单么?

<code class="lang-php">
    
    
    <style>
        /*li {list-style-type:none;}*/
        span{cursor: pointer;background-color: yellowgreen;font-size: 20px}
        .hidden{display: none}
    </style>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    
        <?php $arr = Array(
            Array("cat_id" => 3, "cat_name" => "JavaScript", "parent_id" => 0, "level" => 0),
            Array("cat_id" => 5, "cat_name" => "Jquery", "parent_id" => 3, "level" => 1),
            Array("cat_id" => 6, "cat_name" => "JS高级", "parent_id" => 3, "level" => 1),
            Array("cat_id" => 7, "cat_name" => "JS高级更高级1", "parent_id" => 6, "level" => 3),
            Array("cat_id" => 8, "cat_name" => "JS高级更高级2", "parent_id" => 6, "level" => 3),
            Array("cat_id" => 9, "cat_name" => "JS高级更高级3", "parent_id" => 6, "level" => 3),
            Array("cat_id" => 4, "cat_name" => "PHP", "parent_id" => 0, "level" => 0),
            Array("cat_id" => 10, "cat_name" => "PHP高级1", "parent_id" => 4, "level" => 0),
            Array("cat_id" => 12, "cat_name" => "PHP高级2", "parent_id" => 4, "level" => 0),
            Array("cat_id" => 13, "cat_name" => "PHP高级3", "parent_id" => 4, "level" => 0)
        );

//创建树形菜单
        function createTree(&$arr, $parent_id) {
            $hide = "";
            if ($parent_id != 0) {
                $hide = "hidden";
            }
            $funcName = __FUNCTION__;
            $ul = "";
            $li = "";
            for ($i = 0; $i <span>{$arr[$i]["cat_name"]}</span>{$child}\r\n";
                }
            }
            if ($li != "") {
                $ul = "

<ul class='\"cate'>{$li}</ul>

";
            }
            return $ul;
        }

        echo createTree($arr, 0);
        ?>
    
    <script>
        (function() {
            $(".cate").hover(function() {
                $(this).children("ul").show()
            }, function() {
                $(this).children("ul").hide()
            })
        })()
    </script>

</code>

  1. 将所有的数据预先加载进来,赋给一个js变量。每次选择级联菜单,都从这个变量读取数据。
  2. 这样做相当于把ajax分次请求的数据一次请求下来。

php echo 一个json数据给js的变量

预先在页面中生成json格式数据,传递给js就可以了。

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn