如何在我的侧边栏中悬停时进行动态下拉？

Question

当我单击按钮时，侧边栏将带有动态类别。当我将鼠标悬停在一个类别上时，我试图在侧栏中显示子类别。

但是我很难找到这个，因为我是新人。

我的代码是

 <style>

   .sidenav1 {

  height: auto;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #26b14f;

  overflow-x: hidden;

  padding-top: 60px;

}

.sidenav1 a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 18px;

  color: #fff;

  display: block;

  transition: 0.3s;

}

.sidenav1 a:hover {

  color: #e0dbdb;

}

.sidenav1 .closebtn {

  position: absolute;

  top: 0;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

}

</style>

<div class="control-group" style="margin-top: 0px;">

            <div id="mySidenav" class="sidenav1">

                <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a>

                        <?php $sql=mysqli_query($con,"select id,categoryName  from category");

                        while($row=mysqli_fetch_array($sql))

                        {

                        ?>

                        <a href="category.php?cid=<?php echo $row['id'];?>" >|

                        <?php echo $row['categoryName'];?></a>

                        <?php }

                        ?>

            </div>

        <span id="open" style="font-size:30px;cursor:pointer;color: #ffffff;margin-left: 10px;" title= "categories" onclick="openNav1()">&#9776; </span>

        </div>

<script>

function openNav1() {

  document.getElementById("mySidenav").style.width = "275px";

}

function closeNav1() {

  document.getElementById("mySidenav").style.width = "0";

}

</script>

当我将鼠标悬停在类别上时，应该会出现相应的子类别。我的数据库就像，有两个表一个类别表和另一个子类别表。

类别表

id  categoryName

1   aaa

2   bbb

3   ccc

子类别表

id categoryid subcategory_name

1      1           zzz

2      2           yyy

3      2           xxx

4      3           www

Answer 1

你需要创建一个多维数组来实现你想要的。由于您是初学者，因此最好走一条更简单的道路（尽管这不是最佳方式，但您会明白我为什么这么说）。$sql=mysqli_query($con,"select id,categoryName&nbsp; from category");$catSubCatArr = array();while($row=mysqli_fetch_array($sql)){&nbsp; &nbsp; $catSubCatArr[$row['id']] = $row['categoryName'];&nbsp; &nbsp; $innerSql=mysqli_query($con,"select id, categoryid, subcategory_name from subcategory where categoryid = ".$row['id']]);&nbsp; &nbsp; while($innerRow=mysqli_fetch_array($innerSql)){&nbsp; &nbsp; &nbsp; &nbsp; $catSubCatArr[$row['id']]['subcategory'][$innerRow['id']] = $innerRow['subcategory_name'];&nbsp; &nbsp; }}现在在foreach()的帮助下创建您想要的下拉列表，该下拉列表将与此 $catSubCatArr 嵌套。我想再次通知您，在循环中调用 SQL 查询绝不是一个好主意，它会减慢进程。但我认为这会有所帮助，当您完全了解流程时，您可以进行更改。你可以像这样添加 HTML<?php foreach($catSubCatArr as $key=>$val){ ?><a href="category.php?cid=<?php echo $key;?>" >|<?php echo $val['categoryName'];?></a><?php /* Here start your sub category html?><?php foreach($val['subcategory'] as $innerkey=>$innerval){?><a href="category.php?cid=<?php echo $innerkey;?>" >|<?php echo $innerval['subcategory_name'];?></a><?php }}?>