保持子菜单打开

Question

在此菜单中，子类别向下滑动。我使用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; 
} 

Answer 1

试试这个：

$(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是什么，并交换该值进入上面提供的比较。

Answer 2

你可以把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;。