文章/答案/技术大牛

发布

社区首页 >问答首页 >单击而不是悬停打开菜单

问单击而不是悬停打开菜单
EN

Stack Overflow用户

提问于 2016-12-10 12:17:04

回答 3查看 4.2K关注 0票数 3

我无法在单击事件上打开我的菜单。它会在鼠标悬停事件上打开。我知道这是一个很简单的问题。我试过了，但没能解决。我需要使用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;
}

jquery

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-12-10 13:05:55

你需要的是玩Ul和子css。ul不是锚标记的子标记，因此您需要使用+来获得锚标记的下一个兄弟级。

请在代码中添加此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;
}

见动作

票数 7

Stack Overflow用户

发布于 2016-12-10 12:30:52

对于单击事件，可以在页面中使用jQuery。要加载jquery，请检查google左右，但是在确定之前加载了jQuery之后，您可以执行以下操作：

JQuery：

//start on dom ready
jQuery(document).ready(function(){
//hook on the click event of desired element 
 jQuery('.dropdown').click(function(){
// toggle is-visible class or something..
 jQuery('.action_dropdown').toggleClass('is-visible');
});
});

CSS：

 .dropdown { display:none }
 .is-visible {display:block}

票数 -1

Stack Overflow用户

发布于 2016-12-10 12:31:15

这应该是可行的：

<div align="center" class="action_dropdown_container" onClick="myfunction()"></div>

您现在唯一需要做的就是更改函数名和Voila！

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41075413

复制

相似问题

问单击而不是悬停打开菜单
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击而不是悬停打开菜单EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击而不是悬停打开菜单
EN