Question

我尝试了很多来解决以下问题：点击＆＃34; #pageTitle＆＃34;应该打开＆＃34; #expanMenu＆＃34;。 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

我创建了一个小提琴here，我认为它很好地抓住了你的页面。我稍微调整了menubar的css类，以便文本保持可见，但我所做的主要改变是在#menubar中添加一个类，而不是直接应用新的背景颜色。然后，当您隐藏#expandMenu时，您可以删除该类以恢复原始颜色，无论它是什么。

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

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

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

切换Div与CSS-Hover结合使用

1 个答案: