隐藏/显示菜单项取决于帐户工作,但

时间:2016-11-20 20:51:22

标签: javascript jquery css

如果用户拥有经理帐户,我可以使用管理菜单项。如果用户没有,则隐藏菜单项。它工作正常,但css上有些东西。

如果我单击管理菜单中的某个项目然后单击管理外部的另一个菜单项,则它不起作用,并且超链接在结尾处显示#。为什么?此外,当我缩小菜单时,它会显示菜单项的标签。如果我拿出div,它工作正常,但当然管理菜单将对每个帐户都可用。请看下面的截图。

<div id="management_menu" style="display:none">
 <li class="mm-dropdown">
  <a href="#"><i class="menu-icon fa fa-chain"></i><span class="mm-text">Management</span><span class="badge badge-primary"></span></a>
      <ul>
                 <li class="mm-dropdown">
                    <a href="#"><span class="mm-text">Accounts</span></a>
                          <ul>
                             <li>
                                <a tabindex="-1" href="user_profile_view_all.php"><span class="mm-text">All Accounts</span></a>
                             </li>
                             <li>
                                <a tabindex="-1" href="user_profile_view_dispatchers.php"><span class="mm-text">Dispatchers</span></a>
                             </li>
                             <li>
                                <a tabindex="-1" href="user_profile_view_parts_department.php"><span class="mm-text">Parts Department</span></a>
                             </li>
                             <li>
                                <a tabindex="-1" href="user_profile_view_technicians.php"><span class="mm-text">Technicians</span></a>
                             </li>
                             <li>
                                <a tabindex="-1" href="user_profile_view_specialists.php"><span class="mm-text">Specialists</span></a>
                             </li>
                             <li>
                                <a tabindex="-1" href="user_profile_view_supervisors.php"><span class="mm-text">Supervisors</span></a>
                             </li>
                             <li>
                                <a tabindex="-1" href="user_profile_view_managers.php"><span class="mm-text">Managers</span></a>
                             </li>
                          </ul>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_invoices_view.php"><span class="mm-text">View All Invoices</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_leads_view.php"><span class="mm-text">View All Leads</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_parts_view.php"><span class="mm-text">View All Parts</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_techinspections_view.php"><span class="mm-text">View All Tech Inspections</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_techinspections_view.php"><span class="mm-text">View All Contract Inspections</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_checklists_view.php"><span class="mm-text">View All Checklists</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_hdds_view.php"><span class="mm-text">View All HDDs</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_partswarranty_view.php"><span class="mm-text">View All Parts Warranty</span><span class="label label-warning"></span></a>
                 </li>
                 <li class="mm-dropdown">
                    <a tabindex="-1" href="management_mkregchecklist_view.php"><span class="mm-text">View All MK Reg. Checklists</span><span class="label label-warning"></span></a>
                 </li>
      </ul>

<script>
var logged_in = "<?php echo $_SESSION['account_type'] ; ?>";
   if(logged_in === "Manager") {             
        document.getElementById('management_menu').style.display = 'block';

   } else {
       document.getElementById('management_menu').style.display = 'none';                          
   }
</script>

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

一个问题是,<li class="mm-dropdown">没有父<ul>。或者至少你有一个<div>,它不是严格有效的HTML,因为你只能<li>直接嵌入<ul>

我建议最好删除management_menu div并更改为<li class="mm-dropdown" id="management_menu" style="display:none">

#主要来自<a href="#">。如果您的CSS具有<li>的填充,那么除非您完全点击内部文本,否则将触发<a href="#">

在第二个注释中,使用CSS隐藏管理菜单很容易避免。只有在满足条件时,才能通过在PHP中生成管理菜单来减少恶意活动。否则,任何有好奇心的人都可以在浏览器中取消隐藏管理菜单。