Question

基本上，我有一个地址列表，当用户将鼠标悬停在某个地址上时，我想显示该地址的开放时间。

这是地址标记的示例

<li data-contentid="60" class="list-group-item courier">
    <div class="c-name"> Hermes Parcelshop </div>
    <div class="address"> Virxo,Bedford Avenue,Germanton,Colorado,PE17 7NB</div>
</li>

这是链接到该地址的开放时间的标记

<li id="open-times-60" class="list-group-item op-times" style="display: none;">
    <div class="">Mon 8am - 8pm </div>
    <div class="">Tues 9am - 8pm </div>
    <div class="">Wed 9am - 7pm </div>
    <div class="">Thurs 8am - 9pm </div>
    <div class="">Fri 7am - 7pm </div>
    <div class="">Sat 9am - 6pm </div>
    <div class="">Sun 6am - 8pm </div>
</li>

我目前正在尝试使用的jQuery

$("li.courier").on('Click', function(){
    var num = $(this).data('contentid');
    $('#open-times-' + num).toggleClass();
});

任何帮助或技巧都将非常有用。

感谢您的时间。

http://jsfiddle.net/Zy2Ny/227/

Answer 1

在toggleClass（）函数中，应传递要切换的类的参数。在这里，我创建了一个类名hide，它将被切换，因此被隐藏并显示在悬停上

$("li.courier").hover(function(){
    var num = $(this).data('contentid');
    $('#open-times-' + num).toggleClass('hide');
});

.hide {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-contentid="60" class="list-group-item courier">
  <div class="c-name"> Hermes Parcelshop </div>
  <div class="address"> Virxo,Bedford Avenue,Germanton,Colorado,PE17 7NB</div>
</li>

<li id="open-times-60" class="list-group-item op-times hide">
  <div class="">Mon 8am - 8pm </div>
  <div class="">Tues 9am - 8pm </div>
  <div class="">Wed 9am - 7pm </div>
  <div class="">Thurs 8am - 9pm </div>
  <div class="">Fri 7am - 7pm </div>
  <div class="">Sat 9am - 6pm </div>
  <div class="">Sun 6am - 8pm </div>
</li>

Answer 2

.on('hover',function(){ ... });在jQuery 1.8中已弃用，在1.9中已删除：名称“悬停”用作字符串“ mouseenter mouseleave”的简写。它为这两个事件附加一个事件处理程序，并且处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave。不要将“ hover”伪事件名称与.hover（）方法混淆，该方法接受一个或两个函数。（参考：jQuery Docs.）

您可以使用.hover()或.on('mouseenter',function(){ ... });

$("li.courier").hover(function(){ 
    var num = $(this).data('contentid');
    $('#open-times-' + num).show();  
});

或

$("li.courier").on('mouseenter',function(){ 
    var num = $(this).data('contentid');
    $('#open-times-' + num).show();  
});

悬停显示具有相同ID的内容

2 个答案: