Question

我有来自数据库的动态菜单和子菜单。一切都很好。当我点击菜单子菜单打开，但当我点击这些子菜单时，子菜单隐藏。即使点击它们，我想在那里显示这些子菜单

     <div id='cssmenu'>
        <ul> 
             <?php
             $link=mysql_connect("localhost", "root", "")or die (mysql_error());
             mysql_select_db("onlineapply", $link) or die(mysql_error());
             $state_query = "select * from dept";
             $state_result = mysql_query($state_query);
             while($r = mysql_fetch_array($state_result)){ ?>
             <li class='has-sub'><a href="#"> <span style="font-size:12px; color:#000000"> <?php echo $r['dept_name'];?> </span></a>

             <ul class="submenu">
             <?php
             $city_query = "select post_name, post_id from post where id=".$r['dept_id'];
             $city_result = mysql_query($city_query);
             while($r1 = mysql_fetch_array($city_result)){ ?>
             <li><a href="index.php?pid=<?php echo base64_encode($r1["post_id"]);?>" style="background-color:#ffffff; font-size:11px"><?php echo $r1['post_name'];?></a></li>
             <?php } ?>
             </ul>
             </li>
             <?php } ?> 
        </ul>
        </div>

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
    @charset 'UTF-8';
    /* Base Styles */
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      text-decoration: none;
      line-height: 1;
       position: relative;
    }
    #cssmenu a {
      line-height: 1.3;
    }
    #cssmenu {
      width: 215px;
      background: #fff;
      padding: 3px;
    }
    #cssmenu > ul > li {
      margin: 0 0 2px 0;
    }
    #cssmenu > ul > li:last-child {
      margin: 0;
    }
    #cssmenu > ul > li > a {  
      display: block;
      color: #666666; 
      background: #F6C35F;
        }
    #cssmenu > ul > li > a > span {
      display: block;
      border: 1px solid #666666;
      padding: 6px 10px;
    }
    #cssmenu > ul > li > a:hover {
      text-decoration: none;
    }
    #cssmenu > ul > li.active {
      border-bottom: none;
    }
    #cssmenu > ul > li.active > a {
      background: #97be10;
      color: #fff;  
      border: 1px solid #79980d;
    }
    #cssmenu > ul > li.has-sub > a span {
      background: url(images/icon_plus.png) 98% center no-repeat;
    }
    #cssmenu > ul > li.has-sub.active > a span {
      background: url(images/icon_minus.png) 98% center no-repeat;
      }
    /* Sub menu */
    #cssmenu ul ul {
      padding: 5px 12px;
      display: none;
    }
    #cssmenu ul li ul li a.active {
    display:block;
    }
    #cssmenu ul ul a {
      display: block;
      color: #595959;
      position:inherit;
    }
    #cssmenu ul ul a:hover {
      color: #79980d;
    }

<script type='text/javascript'>
    $(document).ready(function(){
    $(".has-sub .submenu").hide(); 

    $(".has-sub span").click(function(){
        $(".has-sub .submenu").hide('fast'); 
        $(this).parent().find("ul").toggle('fast'); 
    });
   });

   </script>

Answer 1

try this script `
 <script>
    $(document).ready(function(){
       $("#cssmenu ul li ul").css('display','none');
       $("#cssmenu ul li").hover(function(){
       $(this).find('ul:first').css("display","block","visibility","visible");
       },function(){$(this).find('ul:first').css("display","none");
   });
  });
</script>`

Answer 2

我在这个问题上找到了解决方案并完全解决了问题 http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/396233/submenu-stay-open-on-menu-click-isnt-working-correct

<script type="text/javascript">
        $(document).ready(function()
    {
    $('#cssmenu ul li ul.submenu li a').click(function(e){
    if ($(this).attr('class') != 'active'){
    $('#cssmenu ul li a').removeClass('active');
    $(this).addClass('active');
    $(this).css('background', '#97BE10');
    }
    });
    $('a').filter(function(){
    return this.href === document.location.href;
    }).removeClass('active')
    $("ul.submenu > li > a").each(function () {
    var currentURL = document.location.href;
    var thisURL = $(this).attr("href");
    if (currentURL.indexOf(thisURL) != -1) {
    $(this).parents("ul.submenu").css('display', 'block');
    $(this).css('background', '#97BE10');
    $(this).css('color', '#EEEEEE');
    }
    });
    $('#cssmenu > ul > li > a').each(function(){
    var currURL = document.location.href;
    var myHref= $(this).attr('href');
    if (currURL.match(myHref)) {
    $(this).addClass('active');
    $(this).parent().find("ul.submenu").css('display', 'block');
    }
    });
    });
    </script>

如何在点击菜单上显示动态子菜单

2 个答案: