保持子菜单打开

Question

在此菜单中，子类别会向下滑动。我使用CSS来保持子菜单在主类别页面时处于打开状态，但是jQuery的slideUp()函数会在鼠标移出时禁用该功能。我希望在主类别页面上始终保持子菜单处于打开状态。

<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;
}  

- MG1

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，然后将该值替换为我上面提供的比较值即可。

- AlienWebguy

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;。

- Steeven

---

如果整个菜单都在一个页面上，并且使用 PHP 包含在所有主页面中，这样做是否有效？ - MG1

是的，只要所有这些页面都包含CSS和Javascript。 - Steeven

与您的代码不同之处在于使用了 not()，并且您需要通过单个 display:inherit; 行在 CSS 中使 .current 可见。脚本和其他所有内容将像往常一样协同工作。您认为它为什么不能正常工作？ - Steeven

我很困惑，因为我在一个页面上有整个菜单，并且它被包含在网站的所有其他页面中。所以我不确定如何实现这种方法。 - MG1

意思是，我不能在每个页面上将当前类添加到不同的子菜单中，因为我的整个菜单都在一个页面上。 - MG1

好的，明白了。那么只有一个选项：读取URL，这是页面之间唯一的区别。你应该尝试@AlienWebguy的答案。 - Steeven