Question

页面上有一个<li>。当客户将鼠标输入<li>区域时，将弹出另一个<ul>（显示购物车项目）。当用户将鼠标移出<ul>区域时，我不知道如何隐藏此<ul>。

这是我尝试过的jQuery代码：

$("#cartLi")
    .mouseenter(function () {
        $.post("/ShoppingCart/cartDropDown",
            function (data) {
                $('.cart-skeleton').replaceWith(data);
                $('.cart-dropdown').css('display', 'inline-block');

            })
    });
$("#cartLi")
    .mouseleave(function () {
            $('.cart-dropdown').css('display', 'inline-block');
    })

$(".cart-dropdown")
    .mouseenter(function () {
        $('.cart-dropdown').css('display', 'inline-block');
    });

$(".cart-dropdown")
.mouseleave(function () {
        if ($('.cart-dropdown').css.display == 'inline-block') {
            $('.cart-dropdown').css('display', 'none');
        }
    });

HTML：

<li class="catalogue-specials" id="cartLi">    
    <a href="#" id="btnLastOption">
 My Cart
</a>    
</li>
<ul class="cart-dropdown">
</ul>

Answer 1

看看这可行。 :)检查这是否是您的要求？

$(document).ready(function(){
$('.cart-dropdown').hide();
});

$("#btnLastOption").mouseenter(function(){
    
        $('.cart-dropdown').show();
    });

$(".cart-dropdown").mouseleave(function(){
 $('.cart-dropdown').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="catalogue-specials" id="cartLi">    
    <a href="#" id="btnLastOption">
 My Cart
</a>    
</li>
<ul class="cart-dropdown">
<li>hsds</li>
<li>jshd</li>
</ul>

Answer 2

这是使用hide()和show()的解决方案。

jQuery：

$("#cartLi").mouseenter(function () {
    $.post("/ShoppingCart/cartDropDown", function (data) {
        $('.cart-skeleton').replaceWith(data);
    });
    $('.cart-dropdown').show();
});

$(".cart-dropdown").mouseleave(function () {
    $('.cart-dropdown').hide();
});

Answer 3

以下是带有JSON原型的解决方案：

$("#cartLi")
  .mouseenter(function() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        myJson.forEach(item => {
          let html = `<li class="catalogue-specials"><a href="#">${item.id}. ${item.title}</a></li>`;
          $(".cart-dropdown").append(html);
          $('.cart-dropdown').css('display', 'inline-block');
        })
      });
  })

$(".cart-dropdown")
  .mouseleave(function() {
    if ($('.cart-dropdown').css('display') === 'inline-block') {
      $('.cart-dropdown').css('display', 'none');
    }
  });

.cart-dropdown {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="catalogue-specials" id="cartLi">
    <a href="#" id="btnLastOption">My Cart</a>
  </li>
</ul>

<ul class="cart-dropdown">
</ul>

问题是$('.cart-dropdown').css.display == 'inline-block'不正确，应该是$('.cart-dropdown').css('display') == 'inline-block'。

我还建议您开始使用提取而不是$.post()，$.get()，$.ajax()-提取是本机的，$.something()不是本机的，并且具有相当好的浏览器支持。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

如果您不能使用fetch()（例如由于结构或其他要求/条件），则以下是带有$.get()的代码段：

$("#cartLi")
  .mouseenter(function() {
    $.get({
      url: 'https://jsonplaceholder.typicode.com/posts',
      contentType: 'application/json; charset=utf-8',
      success: function(response) {
        let html = ''
        response.forEach(item => {
          html += `<li class="catalogue-specials"><a href="#">${item.id}. ${item.title}</a></li>`;
        })
        $(".cart-dropdown").append(html);
        $('.cart-dropdown').css('display', 'inline-block');
      }
    })
  })

$(".cart-dropdown")
  .mouseleave(function() {
    if ($('.cart-dropdown').css('display') === 'inline-block') {
      $('.cart-dropdown').css('display', 'none');
    }
  });

.cart-dropdown {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="catalogue-specials" id="cartLi">
    <a href="#" id="btnLastOption">My Cart</a>
  </li>
</ul>

<ul class="cart-dropdown">
</ul>

在mouseenter / mouseleave上隐藏/显示HTML元素

3 个答案: