如何使用javascript在li元素中添加ul类 [英] How to add the classes for ul inside li elements using javascript

问题描述

我想用数据库table创建动态菜单。我想在子菜单和子菜单下创建菜单，如n级别的另一个子菜单。

使用php函数我正在创建像这样的html元素

我这样的桌子。我想要的是如果我单击像A这样的父元素只显示A的A1 / A2，A3，A3的子元素，如果A1，A2和A3有子项，那么我点击A1元素显示像这样的相关子元素。首先我想使用javascript.how为父类和子类名添加类。请事先帮助我。

 id refid name userdefined 
 1 0 A 
 2 0 B 
 3 0 C 
 5 1 A1 
 6 5 AA 
 7 5 AB 
 8 6 a1 
 9 6 a2 
 10 1 A2 
 11 1 A3 
 12 2 B1 
 14 3 C1 
 15 3 C2 
 
 
< pre lang =text> 
< ul> 
< li> A< / li> 
< ul> 
< li> A1< / li> 
< ul> 
< li> AA< / li> 
< ul> 
< li> a1< / li> 
< li> a2< / li> 
< / ul> 
< li> AB< / li> 
< / ul> 
< li> A2< / li> 
< li> A3< / li> 
< / ul> 
< li> B< / li> 
< ul> 
< li> B1< / li> 
< li> B2< / li> 
< / ul> 
< li> C< / li> 
< ul> 
< li> C1< / li> 
< li> C2< / li> 
< / ul> 
< / ul> 

我的尝试：



i创建了这个用于创建ul和li元素的递归函数。但问题在于父对象是limain类罚款，而对于子元素，它为所有子子元素提供lichild也是它给lichild class.how以防止这种情况。

功能子菜单（$ parentid = 0）{
  global   $ con ; 
 $ sql = mysqli_query（$ con，  SELECT * FROM test WHERE refid =。 $ parentId的）; 
 {
 $ rowcount = mysqli_num_rows（$ sql）; 
 if（$ rowcount> 0）{
  echo  ' < UL>'; 
} 
 while（$ row = mysqli_fetch_array（$ sql，MYSQLI_ASSOC））
 {
 if（mysqli_num_rows（$ sql）> 0）
 {
 $ sql1 = mysqli_query（$ con，  SELECT * FROM test WHERE refid =。$ row [ '  id']）; 
 if（mysqli_num_rows（$ sql1）> 0&& $ row ['  refid'] == 0）
 {
 
  echo  ' < li class =limain>'。$ row [' 名称]; 
  //   echo'< li>< a href ='。$ row ['userdefined' ]。'>'。$ row ['name']。'< / a>';  
子菜单（$ row [''  id']）; 
  echo  ' < / li>' ; 
} 
 else {
  echo  ' < li class =lichild>< a href ='。$ row ['  userdefined']。' >'。$ row [ '  name']。' < / A>'; 
子菜单（$ row ['  id']）; 
  echo  ' < / li>' ; 
} 
} 
} 
 if（$ rowcount> 0）{
  echo   < / ul>'; 
} 
} 
} 

如果单击任何父元素，则使用此函数显示所有子元素以及子子元素另外。我想只显示第一级子元素，如何做到这一点请提前帮助我。

< script src =   jquery-3.2.1.js>< / script> 
< script type =   text / javascript> 
 $（ function （）{
 
 $（ < span class =code-string>。limain）。click（ function （）{
 
 $（ this ）。find（' 。lichild'） .toggle（）; 
 
}）; 
}）; 

解决方案

parentid = 0 ）{
global

con ;

SQL = mysqli_query（

i want to create the dynamic menu using database table.i want to creating the menu under submenu and submenu under another submenu like n levels.
by using php function i am creating html elements like this
my table like this . what i want is if i click the parent element like A show only the
child elements of the A like A1,A2,A3 if A1 ,A2 and A3 has sub items then i click A1 element show the related child elements like that.for this first i want to add classes for parent class and child classes names using javascript.how to do that .please help me thanks in advance.

       id    refid  name userdefined 
             1      0     A
             2      0     B
             3      0     C
             5      1     A1
             6      5     AA
             7      5     AB
             8      6     a1
             9      6     a2
             10     1     A2
             11     1     A3
             12     2     B1
             14     3     C1
             15     3     C2


<pre lang="text">
<ul> 
<li> A </li>
<ul>
<li> A1 </li>
<ul>
<li> AA </li>
<ul>
<li> a1 </li>
<li> a2 </li>
</ul>
<li> AB </li>
</ul>
<li> A2 </li>
<li> A3 </li>
</ul>
<li> B </li>
<ul>
<li> B1 </li>
<li> B2 </li>
</ul>
<li> C </li>
<ul>
<li> C1 </li>
<li> C2 </li>
</ul>
</ul>

What I have tried:

i have created this recursive function for creating ul and li elements.but the problem is here for parent it is giving limain class fine and for child elements it is giving lichild for all sub child elements also it giving lichild class.how to prevent that.

function submenu($parentid=0){
  global $con;
    $sql=mysqli_query($con,"SELECT * FROM test WHERE refid=".$parentid);
    {
      $rowcount=mysqli_num_rows($sql);
      if($rowcount>0){
        echo '<ul>';
      }
            while($row=mysqli_fetch_array($sql,MYSQLI_ASSOC))
            {
              if(mysqli_num_rows($sql)>0)
              {
              $sql1=mysqli_query($con,"SELECT * FROM test WHERE refid=".$row['id']);
              if(mysqli_num_rows($sql1)>0 && $row['refid']==0)
              {
             
                echo '<li class="limain">'.$row['name'];
                 //echo '<li><a href="'.$row['userdefined'].'">'.$row['name'].'</a>';
                 submenu($row['id']);
                 echo '</li>';
            }
              else{
               echo '<li class="lichild"><a href="'.$row['userdefined'].'">'.$row['name'].'</a>';
               submenu($row['id']);
               echo '</li>';
            }
          }
      }
      if($rowcount>0){
        echo '</ul>';
        }
    }
  }

by using this function if click Any parent element it showing all the child elements along with sub child elements also.i want to show only the first level sub elements only how to do that please help me thanks in advance.

<script src="jquery-3.2.1.js"></script>
  <script type="text/javascript">
 $(function(){

  $(".limain").click(function(){
      
  $(this).find('.lichild').toggle();

  });
});

解决方案

parentid=0){ global

con;

sql=mysqli_query(

这篇关于如何使用javascript在li元素中添加ul类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！