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

【问题标题】：Keep sub menu open on mouse out if sub option clicked/selected如果单击/选择子选项，则在鼠标移出时保持子菜单打开
【发布时间】：2021-03-30 05:00:48
【问题描述】：

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

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

下面是 CSS 属性

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

Keep submenu open on mouse out，已经试过了。

【问题讨论】：

标签： javascript jquery css jsp

【解决方案1】：

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

试试这个。

代码

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


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

【讨论】：

【解决方案2】：

我已将 mouseover 事件 更改为 鼠标单击事件，然后通过使用 jquery 我满足了我的要求。

$(document).ready(function(e){
  
   #To prevent action on child click
   if(e.target !==e.currentTarget)
     return ;

  $("li.parent").children().addClass("dropdown")
 
 });

【讨论】：