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中，您还必须从display:none;删除.current。

保持子菜单打开

2 个答案: