javascript - Toggle Div 结合 CSS-Hover

Question

我尝试了很多来解决以下问题:点击“#pageTitle”应该打开“#expandMenu”。 expandMenu 恰好位于菜单栏的底部。正如您在 CSS 中看到的，背景颜色有悬停效果。代码到目前为止工作正常，但即使我认为我仍然有问题:菜单栏应该保持悬停颜色，直到 toogleMenu 关闭。用户需要用鼠标到达 expandMenu 进行交互。但在那之后，使用我当前的代码，通过 jQuery 添加的 css 不会将自身重置为默认的 css-hover 模式。

如果解决方案可以包括添加一些其他事件的可能性，例如切换图标(打开、关闭)，那也很好

CSS:

  #expandMenu {
        background-color: #009cff;
        opacity: 0.8;   
        height:65px;
        width:100%;
        display:none;
    }
    #menubar {
        height:95px;
        width: 100%;
        color:#FFF;
    }
    #menubar:hover {
        background-color:#0f0f0f;   
        transition: background-color 0.3s ease;
        color:#FFF;
    }

jQuery:

$(document).ready(function(e){
      $("#pageTitle").click(function() {   $('#expandMenu').slideToggle( "fast");
       $('#menubar').css( "background-color", "#0f0f0f" );  } );

})

HTML:

<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>

Answer 1

我创建了一个 fiddle here我认为很好地捕捉了您的页面。我稍微调整了 menubar 的 css 类，以便文本保持可见，但我所做的主要更改是向 #menubar 添加一个类，而不是直接应用新的背景颜色。然后，当您隐藏 #expandMenu 时，您可以删除该类以返回到原始颜色，无论它是什么颜色。

我检查 expandMenu 是否可见并相应地调整类:

if ($('#expandMenu').is(':visible'))
{
    $('#menubar').removeClass('menu-active');
}
else
{
    $('#menubar').addClass('menu-active');
}

我在切换菜单项之前检查此状态，因为 slideToggle 需要一些时间才能完成，并且 div 在调用后不会立即可见。在应用动画之前检查它的状态可以避免这个问题。