时间戳

首页 > 解决方案 > 将悬停转换为单击切换

javascript - 将悬停转换为单击切换

问题描述

我想从悬停转换为鼠标单击，这是一些代码

HTML

<li class="has-dropdown">
    <a href="#">Click Me</a>
        <ul class="dropdown">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">eCommerce</a></li>
            <li><a href="#">Linux</a></li>
            <li><a href="#">API</a></li>
        </ul>
</li>

这是脚本，但仍在鼠标悬停/鼠标离开

var dropdown = function() {

    $('.has-dropdown').mouseenter(function(){

        var $this = $(this);
        $this
            .find('.dropdown')
            .css('display', 'block')
            .addClass('animated-fast fadeInUpMenu');

    }).mouseleave(function(){
        var $this = $(this);

        $this
            .find('.dropdown')
            .css('display', 'none')
            .removeClass('animated-fast fadeInUpMenu');
    });

};

dropdown()

如何将其从悬停更改为单击？

标签： javascripthtml

解决方案

您可以使用 onclick="YourFunction()" 并且只有在您单击它时才会执行该功能。

不确定这是否是您想要的，但请参阅此示例

HTML

<input type="button"  value="Click me" onclick="showlist()" />

    <div id="list"  style="display:none;" > 
    
              <ul class="dropdown" type="hidden">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">eCommerce</a></li>
                <li><a href="#">Linux</a></li>
                <li><a href="#">API</a></li>
            </ul>
    </div>

JS

function showlist() {
  var x = document.getElementById("list");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

http://jsfiddle.net/5an2mo0g/4/

推荐阅读