при щелчке любой опции из списка меню цель выполнения URL-адреса находится внутри другого тега div в том же файле html

Question

У меня есть боковая навигация с динамическим списком меню c из базы данных. Когда я щелкаю опцию в menulist, он должен переосмыслить sh внутри другого тега div "content" и отобразить визуализированную страницу этого связанного параметра списка меню внутри этого тега.

Для упрощения, тег div должен работать as Dynami c iframe извлекает файл параметров href и отображает его внутри.

Это мой код меню, написанный на PHP

<?php
require 'dbh.inc.php';
function show_menu(){
    global $conn;
    $menus = "";
    $menus .= gmm($conn);
    return $menus;
}
function gmm( $conn, $parent_id=NULL){
    $menu = "";
    $sql = "";
    $row="";
    if(is_null($parent_id) ) {
         $sql="select * from `kitting` where `parent_id` is null";
    }
    else{
        $sql="select * from `kitting` where `parent_id`='$parent_id'";
    }
    $result = mysqli_query($conn,$sql) or die(mysqli_error($conn));
    while($row = mysqli_fetch_assoc($result)){
        if( $row['page']){
            $menu .='<li><p><span class="subtitle is-6 has-text-dark has-text-weight-semibold is-uppercase"><a href=./'.$row['page'].'>'.$row['title'].'</a></span></p></li>';
        }
        else{
            $menu .='<li><p><span class="subtitle is-6 has-text-dark has-text-weight-semibold is-uppercase"></span><a href="#">'.$row['title'].'</a></p></li>';
        }
        $menu .= '<ul class="menu-list">'.gmm($conn, $row['id']).'</ul>';
        $menu .= '';
     }
     return $menu;
    }


  ?>

Он должен показывать страницу html данные отображаются внутри тега ниже, и когда я щелкаю в другом меню, тег div должен обновлять sh новыми данными.

<div class="content">
data comes here dynamically
<div>

Пожалуйста, помогите, поскольку я проверил многие веб-сайты и не смог найти ничего связанного.

Answer 1

Базовый c пример, чтобы дать вам представление о поиске многоуровневых вертикальных боковых навигационных панелей. Их множество вокруг.

$(function () {
    	$("#YourDivID").click(function() {
    	  $("ul").slideToggle();
    	  $("ul ul").css("display", "none");
    	});
    	$("ul li").click(function(e) {
    	  $(this).find("ul").slideToggle();
    	  $(this).find("ul ul").css("display", "none");
    	  e.stopPropagation();
    	});
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="YourDivID">
    <li>Test</li>
    <li>Click on me
    <ul>
    <li>test1</li>
    <li>test2</li>
    </ul>
    </li>
    </ul>

Вам необходимо css, чтобы скрыть по умолчанию, в качестве помощника для jquery

Jquery будет Скрыть / Показать щелчок мыши в раскрывающемся списке, чтобы увидеть, как это работает

Answer 2

Вы пробовали использовать шаблоны? Если имена файлов для ваших шаблонов соответствуют значениям Dynami c для каждой строки $ ['page'], вы можете изменить href на URL-адрес Dynami c.

myScript.php?parent_id=<parent_id>&template=$row['page']

$template = isset($_GET['template']) ? $_GET['template'] : '';

Затем в теги содержимого включите путь к соответствующему шаблону.

include('/templates/'.$template.'.php');