Question

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

＆＃13;

$(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');
            }
     });

＆＃13;

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

＆＃13;

我需要在悬停按钮上更改卖家或买家的特定菜单。我怎么能这样做？我的代码无效..

Answer 1

首先，你有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>

Answer 2

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

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

在上面的代码中，您有DOM的重复ID值，而DOM必须具有唯一的ID值。因此，请尝试向IDs提供不同的DOM。它会起作用。

同时从第二个UL删除内联样式。

JSFIDDLE LINK： https://jsfiddle.net/dipeshbeckham/qq617gs5/4/

Answer 3

请尝试使用jQuery on mouse mouseover。

$(document).on('mouseover','.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');
        }
 });

Answer 4

$(".select-user-type_customer").hover(function() {
    $('#buyer').show();
    $('#seller').hide();
}, function() {
    $('#buyer').show();
    $('#seller').hide();
});

$(".select-user-type_performer").hover(function() {
    $('#buyer').hide();
    $('#seller').show();
}, function() {
    $('#buyer').show();
    $('#seller').hide();
});

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

当鼠标指针悬停在它上面时，您可以使用类选择器元素：

悬停不起作用的文件jquery

4 个答案: