jquery - 单击而不是悬停打开菜单

标签 jquery html css

我无法在单击事件时打开我的菜单。它在鼠标悬停事件上打开。我知道这是一个非常简单的问题。我试过但无法解决。我需要这个来使用 selenium 进行自动化,因为它不捕获鼠标悬停事件。

你可以查看我的代码 https://jsfiddle.net/ansari4all/ssyor80k/

<div align="center" class="action_dropdown_container">
    <ul class="action_dropdown">
        <li>
            <a href="">Action</a>
            <ul>
                <li>
                    <a href="abc.php">Edit</a>
                </li>
                <li>
                    <a href="xyz.php">View</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
ul.action_dropdown {
    font-family: "titilliumtext22l_ltmedium", sans-serif;
    font-size: 12px !important;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
}
ul.action_dropdown li {
    display: block;
    position: relative;
    float: left;
}
ul.action_dropdown li ul {
    display: none;
}
ul.action_dropdown li a {
    display: block;
    text-decoration: none;
    color: #000;
    background:#fff url(../../images/xadmin/action_dropdown_arrow.png) no-repeat 42px 6px;
    border: 1px solid #f1f1f1;
    line-height:19px;
    height:19px;
    padding:0px 12px 0px 5px;
    text-align:left;
    margin-left: 1px;
    white-space: nowrap;
}
.action_dropdown_container {
    width:55px; 
    height:21px;
}
.alignmiddle {
    vertical-align:middle !important;
}
ul.action_dropdown li a:hover {
}
ul.action_dropdown li ul li a {
    background:#329ac4 !important;
    color:#fff;
}
ul.action_dropdown li:hover ul {
    display: block;
    position: absolute;
    z-index:999;
    right: 0px;
    /*top: -75px;*/
}
ul.action_dropdown li:hover li {
    float: none;
    font-size: 11px;
    margin-top:-1px;
}

最佳答案

你需要的是玩玩Ul li和子css。 ul 不是 anchor 标记的子标记,因此您需要使用 + 来获取 anchor 标记的下一个兄弟标记。

请在您的代码中添加此 css

ul.action_dropdown li > a:focus + ul {
    display: block;
    position: absolute;
    z-index:999;
    right: 0px;
    /*top: -75px;*/
}
ul.action_dropdown li > a:focus + ul li {
    float: none;
    font-size: 11px;
    margin-top:-1px;
}

参见action

关于jquery - 单击而不是悬停打开菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41075413/

相关文章:

javascript - Bootstrap 4 选项卡中的传单 map 未更新

javascript - JQuery 在一组特定的 p 标签中获取文本

html - 使列表元素在移动设备上不可见(响应式)

html - 将按钮向上移动,忽略按钮上方的内容。

javascript - 如何等待用javascript加载的图像?

JQuery DataTables - 设置一列以增加宽度

javascript - 从 jQuery 插件操作字符串而不是选择器

javascript - 用于在 Safari 中打开弹出窗口的 jquery 对话框

javascript - 为什么 jQuery 对我的所有列表元素应用点击阻止

javascript - 使用 keyup 键入时调整文本区域宽度