时间戳

首页 > 解决方案 > 悬停文档不起作用jquery

javascript - 悬停文档不起作用jquery

问题描述

我有两个按钮和两个列表。这是我的代码：

$(document).on('hover','.select-user-type-js',function(){
            if($(this).hasClass('select-user-type_customer')){
                $('#buyer').show();
                $('#seller').hide();
                $($this).addClass('active');
                $('.select-user-type_performer').removeClass('active');
            }
            else{
                $('#buyer').hide();
                $('#seller').show();
                $($this).addClass('active');
                $('.select-user-type_customer').removeClass('active');
            }
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <a href="" class="select-user-type-js select-user-type_customer active">Customer</a>
        <a href="" id="seller" class="select-user-type-js select-user-type_performer">Seller</a>

    <ul id="buyer">
       <li><a href="#">Menu for buyer #1</a></li>
       <li><a href="#">Menu for buyer #2</a></li>
       <li><a href="#">Menu for buyer #3</a></li>
    </ul>

    <ul id="seller" style="display: none;">
       <li><a href="#">Menu for seller #1</a></li>
       <li><a href="#">Menu for seller #2</a></li>
       <li><a href="#">Menu for seller #3</a></li>
    </ul>

我需要悬停按钮更改卖家或买家的特定菜单。我该怎么做？我的代码不起作用..

标签： javascriptjquery

解决方案

首先，你有 2 id="seller"。id 应该始终是唯一的。

其次，您应该使用mouseenter.

三、你有拼写错误$($this)应该是$(this)

$(document).on('mouseenter', '.select-user-type-js', function() {
  $('.select-user-type-js.active').add($(this)).toggleClass('active');
  if ($(this).hasClass('select-user-type_customer')) {
    $('#buyer').show();
    $('#seller').hide();
  } else {
    $('#buyer').hide();
    $('#seller').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="select-user-type-js select-user-type_customer active">Customer</a>
<a href="" class="select-user-type-js select-user-type_performer">Seller</a>
<ul id="buyer">
  <li><a href="#">Menu for buyer #1</a></li>
  <li><a href="#">Menu for buyer #2</a></li>
  <li><a href="#">Menu for buyer #3</a></li>
</ul>

<ul id="seller" style="display: none;">
  <li><a href="#">Menu for seller #1</a></li>
  <li><a href="#">Menu for seller #2</a></li>
  <li><a href="#">Menu for seller #3</a></li>
</ul>

推荐阅读