Question

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

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>

这是脚本，但仍处于mouseover / mouseleave

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()

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

Answer 1

您可以使用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/

Answer 2

您可以将.click与.toggleClass一起使用

$('#toggle').click(function() {
  $('.has-dropdown')
    .find('.dropdown')
    .css({
      display: function(_, value) {
        return value === 'none' ? 'block' : 'none'
      }
    })
    .toggleClass('animated-fast fadeInUpMenu')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="has-dropdown">
  <a id="toggle" 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>

将悬停转换为单击切换

2 个答案: