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

Posted 2023-05-09

【中文标题】如何在我的侧边栏中悬停时进行动态下拉？

【英文标题】：How to make a dynamic dropdown on hover in my sidebar?

【发布时间】：2020-03-30 00:27:28

【问题描述】：

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

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

我的代码是

 <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

【参考方案1】：

你需要创建一个多维数组来实现你想要的。既然你是初学者，最好走一条更简单的路（虽然这不是最佳方式，但你会明白我为什么这么说的）。

$sql=mysqli_query($con,"select id,categoryName  from category");
$catSubCatArr = array();
while($row=mysqli_fetch_array($sql))
    $catSubCatArr[$row['id']] = $row['categoryName'];
    $innerSql=mysqli_query($con,"select id, categoryid, subcategory_name from subcategory where categoryid = ".$row['id']]);
    while($innerRow=mysqli_fetch_array($innerSql))
        $catSubCatArr[$row['id']]['subcategory'][$innerRow['id']] = $innerRow['subcategory_name'];
    

现在在 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 
?>

【讨论】：

感谢您抽出宝贵时间.. 我有一个疑问。如何在其中添加我的前端 html？类别和子类别名称