Question

之前我有过这个问题，但我可能第一次没有正确地提出这个问题，所以这是我的第二次尝试。我正在创建一个包含动态网页的网站。在其中一个页面上，我在一张桌子下方有3架手风琴，但被一个叫做“包裹”的Div所包围。为了将这些手风琴视为动态页面的一部分，我将它们包含在名为“内容”的Div I中（作为用于测试目的的ID名称和类名）。

以下是包含这些手风琴的动态内容的HTML部分：

<body>
<form id="form1" runat="server" >
<div id="content" class="content">
    <table style="width: 1200px">
        <tr>
            <td style="width: 800px">
                <h1>Title</h1><br />
                blah blah
              </td>
          </tr>
    </table>

    <div id="wrapping" class="wrapping">
        <p class="accordionButton"><strong>Service 1</strong></p>
        <div class="accordionContent">  
            Item1<br />
            Item2<br/>
        </div>
        <p class="accordionButton"><strong>Service 2</strong></p>
        <div class="accordionContent">
            Item1<br />
            Item2<br />
        </div>
        <p class="accordionButton"><strong>Service 3</strong></p>
        <div class="accordionContent">
            Item1<br />
        </div>                       
    </div>
</div>
</form>
</body>

以下是我正在使用的整个相关Jquery代码段：

 $(document).ready(function() { 
   $('.wrapping').find('p.accordionButton').each(function() 
       { alert("found it") });  //Test

    //ACCORDION BUTTON ACTION    
    $('.wrapping').find('p.accordionButton').mouseover(function() {
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $(".accordionContent").hide();
    });

以下是与程序关联的CSS，包括一些不适用于此示例的样式：

  #load {   
     display: none;   
     position: absolute;   
     right: 10px;   
     top: 10px;   
     background: url(images/ajax-loader.gif);   
     width: 43px;   
     height: 11px;   
     text-indent: -9999em;   
 }

 #nav-menu ul
 {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 #nav-menu li
 {
    float: left;
    margin: 0 0.15em;
 }

 #nav-menu li a
 {
    background: url(background.gif) #fff bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 9em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
 }

  #nav-menu li a
 {
   float: none
 }

 #nav-menu
 {
   width:30em
 } 

.accordionButton
{
width: 650px;
float: left;
background: #99CC99;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
text-align: center;
 }

 .accordionContent {    
width: 650px;
float: left;
background: #95B1CE;
display: none;
}

问题：我可以通过上面的测试语句在页面上找到每个手风琴按钮（我得到3个警报，每个手风琴按钮一个），但不能使用相同的方法进行鼠标悬停。那是为什么？

Answer 1

我查看了您的previous question，并且此信息中没有相关信息。看起来您正在使用jQuery的.load()函数来填充<div id="content" />。如果你那么你需要使用实时绑定而不是标准绑定函数。

.mouseover(function())是.bind(mouseover,function())的简写，这对于最初生成DOM后加载的内容无效。相反，您应该使用.live(mouseover,function())，其中包含.load()函数添加到DOM的任何内容。以下是有关实时绑定的更多信息：jQuery's .live() handler

除此之外，您应该（正如其他人所述）使用mouseenter而不是mouseover，因为当您将鼠标悬停在任何指定的元素上时，后者会触发，而后者仅触发每个元素或儿童一次。我已经解释得很糟糕 - 这里有一个更好的信息链接和一个互动的例子：jQuery's mouseenter event

我希望这有帮助！

Answer 2

mouseover可能非常古怪，建议使用mouseenter

Answer 3

我不确定你的要求，但你肯定可以对你的鼠标悬停功能进行一些调整。

$('.wrapping').find('p.accordionButton').mouseover(function() {
    if($(this).next().is(':hidden')){
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');
    }
});

这将改善手风琴的可用性，例如只在预期时切换视图窗格。

或..也许尝试这种修改：

$('.wrapping').find('p.accordionButton').each(function() {
    $(this).mouseover(function() {
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');
    });
});

Answer 4

我通过删除启用动态页面的代码解决了这个问题。这简化了代码并消除了一定程度的复杂性。

上面显示的代码有效，我甚至让它变得更加漂亮。如果您对此感到好奇，请查看我的test site。

在2个Div中找到一个JQuery手风琴

4 个答案: