2017-05-05 137 views
-3

这里有一个很好的工作phpmysqlicss菜单和子菜单。但他们是一个小问题与PHP。动态菜单和子菜单中的css和php问题

问题发生在下面的图像中。

ISSUE DESCRIBED IN THIS IMAGE

MySQL数据库IMAGE MYSQL TABLE MENUS DATAILS

现在我想删除衬里不是数据内部存在该列表<li>。在先进的感谢

HTML/CSS/PHP代码:

<?php 
    $link = new mysqli('localhost','root','','foodbasketonline'); 

    if($link->connect_error){ 
     die("Connection Failed".$link->error); 
    } 

    $sql = "SELECT * FROM menus"; 
    $result = $link->query($sql); 
    $row_count = $result->num_rows; 



    while($row = $result->fetch_assoc()){ 
     $rows[] = $row; 
    } 
?> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style> 
    #main_nav{ 
     width:204px; 
     background:#f5f5f5; 
     padding:0; 
    } 

    .main_ul{ 
     list-style:none; 
     padding:0; 
     position:relative; 
     margin-bottom:0; 
    } 

    li.main_li{ 
     line-height:50px; 
     border-bottom:1px solid #ddd; 
     padding-left:20px; 
    } 

    ul.main_ul ul{ 
     display:none; 
    } 

    ul.main_ul li:hover > ul{ 
     display:block; 
     background:#fff; 
     border:1px solid #e5e5e5; 
     border-radius:5px; 
     width:150px; 
     line-height:40px; 
     padding-left:10px; 
     position:absolute; 
    } 

    ul.main_ul ul li:hover > ul{ 
     display:block; 
     background:#fff; 
     border:1px solid #e5e5e5; 
     border-radius:5px; 
     width:150px; 
     margin-left:100px; 
     line-height:40px; 
     padding-left:10px; 
     position:absolute; 
     top:10px; 
    } 


    ul.main_ul ul ul li:hover > ul{ 
     display:block; 
     background:#fff; 
     border:1px solid #e5e5e5; 
     border-radius:5px; 
     width:150px; 
     margin-left:80px; 
     line-height:40px; 
     padding-left:10px; 
     position:absolute; 
     top:30px; 
    } 

    @media only screen and (min-device-width: 320px) and (max-device-width: 320px) and (orientation: portrait) { 
     button.menu_btn{ 
      position:relative; 
      left:-38%; 
     } 

     #main_nav{ 
      width:100%; 
      background:#f5f5f5; 
      padding:0; 
     } 
    } 

    @media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (orientation: portrait) { 
     button.menu_btn{ 
      position:relative; 
      left:-38%; 
     } 

     #main_nav{ 
      width:100%; 
      background:#f5f5f5; 
      padding:0; 
     } 
    } 
    @media only screen and (min-device-width: 414px) and (max-device-width: 414px) and (orientation: portrait) { 
     button.menu_btn{ 
      position:relative; 
      left:-38%; 
     } 

     #main_nav{ 
      width:100%; 
      background:#f5f5f5; 
      padding:0; 
     } 
    } 

</style> 
    </head> 
    <body> 
     <button type="button" class="navbar-toggle btn btn-primary menu_btn" data-toggle="collapse" data-target="#main_nav"> 
      <span class="icon-bar" style="background:#000;"></span> 
      <span class="icon-bar" style="background:#000;"></span> 
      <span class="icon-bar" style="background:#000;"></span>       
     </button> 

     <div class="collapse navbar-collapse" id="main_nav"> 
     <?php 
      $items = $rows; 
      $id=''; 

      echo '<ul class="main_ul">'; 
      foreach($items as $item){ 
       if($item['parent_id'] == 0){ 
        echo '<li class="main_li"><a href="#">'.$item['menu'].'</a>'; 
        $id = $item['id']; 
        sub($items, $id); 
        echo '</li>'; 
       } 
      } 
      echo '</ul>'; 

      function sub($items, $id){ 
       echo '<ul style="list-style:none;">'; 
       foreach($items as $item){ 
        if($item['parent_id'] == $id){ 
         echo '<li><a href="#">'.$item['menu'].'</a>'; 
         sub($items, $item['id']); 
         echo '</li>'; 
        } 
       } 
       echo '</ul>'; 
      } 
     ?> 
     </div> 

    </body> 
</html> 
+1

**我为什么要呐喊**你问? - 因为你是。头脑低调一点吗? CAPS和** BOLD **不会很好。 –

回答

0

我想将这段代码,希望它会工作。它会产生UL如果发现数据和第一次创建UL那么下一次不会产生UL和同一端部分,但未经测试

echo '<ul class="main_ul">'; 
      foreach($items as $item){ 
       if($item['parent_id'] == 0){ 
        echo '<li class="main_li"><a href="#">'.$item['menu'].'</a>'; 
        $id = $item['id']; 
        sub($items, $id); 
        echo '</li>'; 
       } 
      } 
      echo '</ul>'; 

$i = 0; 
foreach ($items as $item) { 
    if ($i == 0) { 
     echo '<ul class="main_ul">'; 
    } 
    if ($item['parent_id'] == 0) { 
     echo '<li class="main_li"><a href="#">' . $item['menu'] . '</a>'; 
     $id = $item['id']; 
     sub($items, $id); 
     echo '</li>'; 
    } 
    if ($i == 0) { 
     echo '</ul>'; 
    } 
    $i++; 
} 
+0

它不工作? –

+0

它不起作用 –

+0

同样的问题?你可以给我发送你的数据库表菜单表,在这种情况下,我创建这个问题 –