保持子菜单打开
问题描述:
在此菜单中,子类别向下滑动。我使用CSS来保持子菜单在主分类页面上处于打开状态,但jQuery slideUp()
函数在mouseOut上禁用该菜单。我希望在主类别页面上始终打开子菜单。保持子菜单打开
<div id="sidebar">
<ul>
<li class="main">
<a href="real_estate.php" class="real_estate">Real Estate </a>
<ul class="sub" id="sub_real_estate">
<li> <a href="consulting.php">Consulting Services</a></li>
<li> <a href="investment.php">Investment</a></li>
<li> <a href="property_mgmt.php">Property Management</a></li>
<li> <a href="development.php">Development</a></li>
</ul>
</li>
<li class="main">
<a href="investment.php" class="">Investment</a>
<ul class="sub" id="sub_investment">
<li><a href="philosophy.php">Philosophy</a></li>
<li><a href="criteria.php">Criteria</a></li>
</ul>
</li>
</ul>
</div>
jQuery的
$(document).ready(function() {
$(".main").hover(function() {
$(".sub", this).slideDown('slow');
},
function() {
$(".sub", this).slideUp('slow');
});
})
CSS
.sub {display:none;}
body.real_estate #sub_real_estate, body.investment #sub_investment {
display:block;
}
答
试试这个:
$(document).ready(function() {
$(".main").hover(function() {
$(".sub", this).slideDown('slow');
},
function() {
if(window.location.href != 'mysite.com/main-categories')
{
$(".sub", this).slideUp('slow');
}
});
});
只需alert(window.location.href);
看到你的主要类别页href是什么,并交换该值进入上面提供的比较。
答
你可以把class="current"
子菜单上的每一页上,并使用not()
:
$(document).ready(function() {
$(".main").hover(function() {
$(".sub", this).not(".current").slideDown('slow');
},
function() {
$(".sub", this).not(".current").slideUp('slow');
});
})
在CSS,那么你还可以选择从.current
删除display:none;
。
如果整个菜单都在一个页面上并且在所有主页面中使用php进行包含,这种工作方式是否可行? – MG1
是的,只要CSS和Javascript包含在所有这些页面上即可。 – Steeven
与你的不同之处在于使用'not()',并且你必须在CSS中使用'display:inherit;'line fx来使'.current'可见。脚本和其他所有内容将以一如既往的相同方式一起工作。你为什么认为它不应该工作? – Steeven