时间戳

首页 > 解决方案 > 如果单击/选择子选项，则在鼠标移出时保持子菜单打开

javascript - 如果单击/选择子选项，则在鼠标移出时保持子菜单打开

问题描述

如果选择了任何子选项，则有一个带有父子选项的侧边菜单，用于在右侧主 div 上显示内容。父选项将在页面加载时显示，当鼠标悬停在父选项上时，将显示子选项，当鼠标移出时，子选项将隐藏。

现在，如果选择/单击子选项，我也想在鼠标移出时保持该特定父项的子选项（子菜单）扩展，并且在选择其他父子选项时它应该被隐藏。

下面是 CSS 属性

# parent
 ul li: hover li{
    display : block;
  } 
# child
ul li ul li a : hover{
  background-color - red;
  border-radious: 25px;
  color : red;
   }

鼠标移出时保持子菜单打开，已经尝试过。

标签： javascriptjquerycssjsp

解决方案

如果选择/单击子选项，则将类（例如选定/活动）传递给父级，并使用该类使子级“显示块重要”在这种情况下可能会对您有所帮助。

尝试这个。

代码

//JS
$('.child-option').on('click', function() {
    $('.child-option').parents('.parent').removeClass('selected');
    $(this).parents('.parent').addClass('selected');
});


//CSS
.parent.selected li {
    display: block!important;
}

推荐阅读