0

我有几个实例

(".wrappingdivclass > .hovercontents > .hovercontent2")

在页面上.. 都需要独立运行，但调用相同的 jquery。如您所见，它的两个相同的 HTML 块...

我将如何向上/向下移动 dom 树以仅将悬停/显示隐藏在 wrappingclass div 中的内容上，而不影响下一个 wrappingclass div 的所有内容。

<div class="wrappingclass" id="notthesecondone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff</p>
     <p class="hoverheading1">on hover display stuff1</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>
    <div class="wrappingclass" id="notthefirstone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff/hide stuff1</p>
     <p class="hoverheading1">on hover display stuff1/hidestuff</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>

这是jQuery：

//does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent").show();
  //toggle the componenet with class msg_body
  jQuery(".hoverheading").hover(function()
  {
     jQuery(this).parent().children(".hovercontent").show()
    jQuery(this).parent().children(".hovercontent").siblings().hide();
  });
});
4

1 回答 1

0

尝试更换

jQuery(this).parent().children(".hovercontent").show()
jQuery(this).parent().children(".hovercontent").siblings().hide();

和

jQuery('.hovercontent').hide();
jQuery(this).closest('.hovercontent').show

编辑

替换hover为mouseover

最终编辑，

它实际上是这样的..（内部 DOM 准备就绪）

$("p[class^=hovercontent]").hide();
//toggle the componenet with class msg_body
$("p[class^=hoverheading]").mouseover(function() {
    $("p[class^=hovercontent]").hide();
    $(this).closest('.hoverheaders').next().find('p').eq($(this).index()).show();
});​

演示 - http://jsfiddle.net/68UVj/

于 2012-12-12T17:55:03.080 回答