将鼠标放在菜单上并刷新网站时切换菜单错误

时间:2017-04-20 11:59:46

标签: javascript html css menu toggle

我在我的网站上进行了切换菜单:http://nhakhoadrvuong.vn/ 但是当我将鼠标放在菜单上并刷新网站时,这是错误的

喜欢这张图片:enter image description here

请检查视频以获得更清晰

https://youtu.be/yY5YlNuFnFQ

这是不合适的,因为用户通常会将鼠标放在菜单上。

以下是我的代码:

 <div>
    <ul class="nav" id="danhmuc" >
    <div class="block2 nhakhoadrvuong" >
    <a  href="."  itemprop="name">NHA KHOA DR:VƯƠNG </a>
    </div>
    <?php
    foreach ($doc_categories as $loaicha)
    {
    ?>
    <li>
        <a  href="<?php
        if (($loaicha->SubID)!=='0')
        {echo $loaicha->SubID;}
        else
        {echo thu_vien::bo_dau($loaicha->NameVn)."/".$loaicha->CategoryID."/1";}            
    ?>"><?php echo $loaicha->NameVn ?></a>
        <ul>

                <?php               
                foreach ($loaicha->items as $loai_con)
                {                   
                ?>
                <li>
                <a <?php 
                //vi menu mobile loai ch khong click duoc href nen chia ra, neu co subID thi dung onclick, khong co thi dung href
                if($loai_con->SubID>79&&$loai_con->SubID<108)               
                {echo 'href="'.thu_vien::bo_dau($loai_con->NameVn).'-'. $loai_con->SubID.'"';}
                else
                {echo 'href="javascript:void()" onclick="window.location.href='."'".thu_vien::bo_dau($loai_con->NameVn).'-'. $loai_con->SubID."'";}
            ?>"><span class="fa fa-location-arrow" style="float:left;padding:5px;"></span><?php echo $loai_con->NameVn ?></a>
                <ul style="min-width:<?php 
                //lay chieu dai tieu de tin tuc de set min-width
                $max_length=$m_tin_tuc->Doc_max_length( $loai_con->CategoryID);
                    if(($max_length->Maxl)>=100)
                    {echo $max_length->Maxl*4.9;}
                else if(($max_length->Maxl)<50)
                {echo $max_length->Maxl*7;}
                else
                {echo $max_length->Maxl*5.9;}
                ;?>px">                 
                    <?php
                        $doc_tin=$m_tin_tuc->Doc_tin_tuc_theo_ma_loai($loai_con->CategoryID);               
                    foreach ($doc_tin as $tin)
                    {                   
                    ?>
                        <li><a
                        href="<?php echo thu_vien::bo_dau($tin->TitleVn)."-".$tin->NewsID?>">
                        <span class="fa fa-location-arrow" style="float:left;padding:5px;"></span><?php echo $tin->TitleVn ?></a></li>
                    <?php
                    }
                    ?>
                </li>   
                </ul>               
                <?php
                }
                ?>

        </ul>           
    </li>
    <?php
    }
    ?>


        <div class="block"  style="float:left;">
              <form class="searchbox-container ng-pristine ng-valid" action="tim_kiem.php" method="GET">
                  <input type="search" class="searchbox ng-pristine ng-valid ng-touched"  placeholder="Tìm kiếm..." name="gia_tri">

                  <button name="btnTim" type="submit" class="searchbutton fa fa-search"></button>
              </form>
            </div>
</ul>

</div>

<script>
var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();

})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 965) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    } 
    else if (ww >= 965) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

</script>

0 个答案:

没有答案