javascript - 当在 jquery.menu-aim 中打开父菜单时，强制子菜单可见

Question

我正在使用 HoverIntent 和 jquery.menu-aim 构建 Magento 菜单(对于这个问题只有第二个很重要)。

我快完成了，但我不知道如何强制第一个子菜单条目默认可见，打开父下拉菜单。此时，用户什么也看不到，必须先将鼠标悬停在父菜单项上。

我测试了一些事情，比如让第一个菜单条目显示:通过 css 和/或 jQuery 使用 nth-child(1) 阻止，但没有成功，因为我有重叠等等。请参阅我的 CSS 中的最后一行注释。

这里是 codepen example这是我粘贴的代码:

更新 fiddle 上的代码示例

jQuery:

    jQuery('.nav ul').menuAim({
    activate: activateSubmenu,
    deactivate: deactivateSubmenu

});

function activateSubmenu(row) {
    var $row = jQuery(row),
        $submenu = $row.children('.nav-sub').children('ul'),
        $subbg = $row.children('.nav-sub').children('div'),
        $subh1 = $row.children('.nav-sub').children('h1');
    $row.children('a').addClass('hover');
    $submenu.css({
        display: 'block'
    });
    $subbg.css({
        display: 'block'
    });
    $subh1.css({
        display: 'block'
    });
}

function deactivateSubmenu(row) {
    var $row = jQuery(row),
        $submenu = $row.children('.nav-sub').children('ul'),
        $subbg = $row.children('.nav-sub').children('div'),
        $subh1 = $row.children('.nav-sub').children('h1');
    $row.find('a').removeClass('hover');
    $submenu.css({
        display: 'none'
    });
    $subbg.css({
        display: 'none'
    });
    $subh1.css({
        display: 'none'
    });
}

HTML:

<nav class="nav">
  <ul class="nav-list">
    <li>
      <a href="#">menu1</a>
       <div class="nav-sub">
         <div class="nav-sub-bg"></div>
           <ul>
              <h1>Blabla</h1>
              <li>sub1</h1>
              <li>sub2</h1>
              ...
           </ul>
       </div>
    </li>
    <li>
      <a href="#">menu2</a>
       <div class="nav-sub">
         <div class="nav-sub-bg"></div>
           <ul>
              <h1>Blabla</h1>
              <li>sub1</h1>
              <li>sub2</h1>
              ...
           </ul>
       </div>
    </li>
  </ul>
</nav>

CSS:

.top-menu {
    position: static;
    top: 95px;
    background: #303030;
    padding: 5px;
    color: #fff;
    width: 253px;
    text-align: center;
    cursor: pointer;
}

.top-menu-dropdown {
    width: 100%;
    height: 448px;
    background: rgb(65, 65, 65);
    position: absolute;
    left: 0px;
    cursor: default;
    z-index: 1;
    display: none;
    margin-top: 5px !important;
}

.nav {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

.nav ul {
    margin: 0;
    padding: 0;
    width: 258px;
    background: #ECECEC;
    padding-left: 6px;
}

.nav li {
    display: block;
    padding: 0;
    border-bottom: 1px solid #F0F0F0;
    -webkit-box-shadow: -6px 0 0 0 #FF0000;
    box-shadow: -6px 0 0 0 #FF0000;
}

.nav a {
    display: block;
    padding: 10px 0;
    color: #666;
    text-decoration: none;
    font-size: 18px;
    padding: 12px;
    font-family: proxima_nova_thin;
}

.nav a.hover, .nav a:hover {
    background: #F7F7F7;
    color: #000;
}

.nav-list a:after {
    content: '>';
    float: right;
    padding-right: 8px;
    font-size: 14px;
    line-height: 30px;
}

.nav-sub a:after {
    content: '';
}

.nav-sub ul {
    background: rgb(247, 247, 247);
    width: 736px;
    display: none;
    position: absolute;
    left: 264px;
    top: 0px;
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
    -webkit-column-rule: 1px dotted #ddd;
    -moz-column-rule: 1px dotted #ddd;
    column-rule: 1px dotted #ddd;
    -moz-column-fill: balance;
    column-fill: balance;
    padding: 69px 5px 0 5px;
}

.nav-sub ul li {
    text-align: left;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.nav-sub ul li a {
    color: #333;
    font-size: 14px;
    display: block;
    padding: 10px;
    font-family: proxima_nova;
    margin-left: 6px;
}

.nav-sub ul li a:hover {
    background: rgb(255,255,255);
    border-left: 6px solid red;
    margin-left: 0;
}

.nav-sub h1 {
    text-align: right;
    font-family: proxima_nova_thin;
    border-bottom: 1px solid;
    margin: 20px 20px;
    line-height: 1;
    width: 690px;
    position: absolute;
    top: 0;
    font-size: 24px;
    color: #303030;
}

.nav-sub-bg {
    background: rgb(247, 247, 247);
    width: 746px;
    height: 424px;
    display: block;
    position: absolute;
    top: 0;
    left: 264px;
    z-index: -1;
}

/*ul.nav-list li:nth-child(1) ul {display: block}*/

Answer 1

这就是你要找的吗？你可以用两种不同的方式 通过 CSS

 ul.nav-list li:first-child ul {display: block}

通过 js

$('ul.nav-list li').first().find('ul').css('display','block');

在 js 中使用 hover 只显示 block 你想要的菜单并隐藏其他菜单

$('ul.nav-list li').hover(function(){
  $('ul.nav-list li ul').css('display','none');
  $(this).find('ul').css('display','block');
});

而不是所有这些都使用 css

 ul.nav-list li:first-child ul {display: block}
 ul.nav-list li:hover ul {display: block}

DEMO