Question

我已经设法整理了一小部分Jquery来显示和隐藏基于将光标悬停在其父div上的人的div。我想使用相同的类在页面上有多个这样的实例。代码如下：

<script type="text/javascript">
$(document).ready(function(){
$('.focus_hidden').hide();
    $('.focus_col').hover(function() {
    $('.focus_hidden').slideToggle();
    return false;
    })
})
</script>

Answer 1

你的代码部分阅读......

$('.focus_col').hover(function() {
  $('.focus_hidden').slideToggle();
  return false;
})

每当任何 .slideToggle元素悬停时，

就会将focus_hidden应用于所有focus_col元素。如果您要将行为应用于已悬停的特定元素，则需要使用$(this)例如$(this).slideToggle()

但你的问题缺乏明确性......

Answer 2

我知道每个focus_col都有一个focus_hidden 一种方法是将两个元素放在同一个父元素中：

<div class="focus">
  <div class="focus_col">COL1</div>
  <div class="focus_hidden">HIDDEN1</div>
</div>
<div class="focus">
  <div class="focus_col">COL2</div>
  <div class="focus_hidden">HIDDEN2</div>
</div>

$('.focus_col').hover(function() {
  $(this).closest('.focus').find('.focus_hidden').slideToggle();
  return false;
})

请参阅我的jsfiddle，例如：http://jsfiddle.net/bouillard/VPG5S/

但正确的方法将取决于您的HTML组织另一种方法可以使用数据来关联元素：http://jsfiddle.net/bouillard/kCbaT/

Answer 3

如果您包含相关的HTML会有所帮助，但基本上您的问题是您在悬停函数中使用另一个常规选择器，当真正在那时您应该相对于正在悬停的项目来定位DOM。 / p>

例如：

  <div class="parent">
    <div class="focus_col">
       Roll over me
    </div>
    <div class="focus_hidden">
       Hidden stuff!
      </div>
  </div>

  <div class="parent">
    <div class="focus_col">
       Or roll over me too
    </div>
    <div class="focus_hidden">
       Some more hidden stuff!
    </div>
  </div>

然后稍微更改jQuery，以便在悬停功能中根据当前悬停的项目选择正确的focus_hidden：

$('.focus').hover(function() {
    $('.focus_hidden', $(this).parent()).slideToggle();
    return false;
})

我对不同选择器的效率的了解并不是那么好，所以如果可以改进上述内容，也许有人可以添加评论。这取决于您希望在设计中的灵活性;例如，如果你知道focus_hidden div将总是跟随focus_col，你可以使用next（）直接跳转到它。

另外，我会删除.hide（）调用，只是改变CSS，以便默认隐藏focus_hidden，节省一些客户端处理。

Jquery显示/隐藏。一个类的多个实例

3 个答案: