我在我的网站上进行了切换菜单: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>