点击打开菜单而不是悬停

I am unable to open my menu on click event. It opens on mouse hover event. I know it is a very simple question. I tried but am unable to resolve it. I need this for automation using selenium because it does not capture mouse hover events.

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

you can view my code on https://jsfiddle.net/ansari4all/ssyor80k/

你可以在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;
}

3 个解决方案

#1

What you need is to play with Ul li and child css. The ul is not the child of anchor tag so you need to use + to get the next sibling of the anchor tag.

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

Please add this css in your code

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

See in action

看到实际行动

#2

-1

This should work:

这应该工作:

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

The only thing you now have to do is change the function name and Voila!

您现在唯一要做的就是更改功能名称和Voila!

#3

-1

For clickevents you could use jQuery in your page. For loading jquery check google or SO, but after making sure you are loading jQuery before this you could do something like:

对于clickevents,您可以在页面中使用jQuery。对于加载jquery检查google或SO,但在确定你之前加载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