Question

单击父项复选框后如何设置下拉菜单然后打开父项子列表？
我想设置下拉菜单。当我点击像物理一样的复选框主题名称然后打开物理的子类别，否则不打开。所有主题列表保存在sql数据库中，所以我不会把这段代码：

$('input[name="Physics"]').on('click', function(){$('.physicsTable').slideToggle();})
$('input[name="Chemistry"]').on('click', function(){$('.cheTable').slideToggle();})

所以更多的想法请给我。这里有一些示例代码。但是我在Sql Database.i中选择主题名称。将php放在主题名称Physics.all主题列表中，使用while循环。我想以表格形式设置此菜单。任何人都可以帮助我。告诉我如何设置JQuery。

它的示例代码：

<table >
<tr>
        <td valign="top">Disciplines :</td>
        <td><table>
            <tr>

         <td width="30"><input type="checkbox" name="Physics" /></td>
              <td width="200">Physics
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Acoustics" /></td>
              <td width="200">Acoustics</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Cosmology" /></td>
              <td width="200">Cosmology</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
              <td width="200">Nuclear Physics</td>
               </tr>
          </table>

                    <td width="30"><input type="checkbox" name="Chemistry" /></td>
              <td width="200">Chemistry
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Chromatography" /></td>
              <td width="200">Chromatography</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Catalysis" /></td>
              <td width="200">Catalysis</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Geochemistry" /></td>
              <td width="200">Geochemistry</td>
                    </tr>
          </table>
               </tr>
          </table>
              </td>

                </tr>




          </table>

它是一个真实的代码：

<table>
<tr>
        <td valign="top">Disciplines
        <?php echo REQUIRED?></td>
        <td><table>
            <tr>
            <?php $rsED=$db->execute("SELECT Ed_Id, Ed_Name FROM ".TBL_EVENT_Desipiline." Where Ed_Parent=0");
         while($rowED=$db->row($rsED)){?>
              <td width="30"><input id="menu1" type="checkbox" name="<?php echo $rowED["Ed_Name"]?>" /></td>
              <td width="200"><?php echo $rowED["Ed_Name"]?>
              <table class="physicsTable" style=" display:none;">
            <tr>
            <?php $rsSED=$db->execute("SELECT Ed_Id, Ed_Name, Ed_Parent FROM ".TBL_EVENT_Desipiline." WHERE Ed_Parent='".$rowED["Ed_Id"]."'ORDER BY Ed_Id");
         while($rowSED=$db->row($rsSED)){?>
              <td width="30"><input type="checkbox" name="<?php echo $rowSED["Ed_Name"]?>" /></td>
              <td width="200"><?php echo $rowSED["Ed_Name"]?></td>
               </tr><?php  } ?>
          </table>
              </td> 
            </tr><?php  } ?>
          </table>  
          </td>
      </tr>
</table>

Answer 1

我认为这就是你想要的：

$(':checkbox').on('click', function () {
    $(this).parent('td').next('td').find('table').slideToggle();
});

$(this)：目前点击了checkbox
parent('td')：父节点
next('td')：下一个td元素
find('table')：获取

table

演示：https://jsfiddle.net/tusharj/zedqx1ya/

Answer 2

为html

中的表提供类

<table >
<tr>
        <td valign="top">Disciplines :</td>
        <td><table>
            <tr>

         <td width="30"><input type="checkbox" name="Physics" /></td>
              <td width="200">Physics
              <table class='physicsTable' >
            <tr>
              <td width="30"><input type="checkbox" name="Acoustics" /></td>
              <td width="200">Acoustics</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Cosmology" /></td>
              <td width="200">Cosmology</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
              <td width="200">Nuclear Physics</td>
               </tr>
          </table>

                    <td width="30"><input type="checkbox" name="Chemistry" /></td>
              <td width="200">Chemistry
              <table class='cheTable'>
            <tr>
              <td width="30"><input type="checkbox" name="Chromatography" /></td>
              <td width="200">Chromatography</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Catalysis" /></td>
              <td width="200">Catalysis</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Geochemistry" /></td>
              <td width="200">Geochemistry</td>
                    </tr>
          </table>
               </tr>
          </table>
              </td>         
                </tr>   
          </table>

js file

$(document).ready(function(){
   $('.physicsTable').hide();
    $('.cheTable').hide();   
$('input[name="Physics"]').on('click',function(){$('.physicsTable').toggle();})
$('input[name="Chemistry"]').on('click', function(){$('.cheTable').toggle();})
});

您可以在http://jsfiddle.net/quobc2Lf/1/

运行并检查代码

如何在单击父项复选框时设置下拉菜单，然后打开父项子列表？

2 个答案: