在2個Div節點中查找JQuery手風琴

我之前有過這個問題，但第一次我可能沒有正確地問過它，所以這是我的第二次嘗試。我正在用動態網頁創建一個網站。在其中的一頁上，我在桌子底下有3個手風琴，但被稱爲「包裝」的Div包圍。爲了將這些手風琴視爲動態頁面的一部分，我將它們包含在我稱爲「內容」的Div中（作爲測試用途的ID名稱和類名稱）。在2個Div節點中查找JQuery手風琴

下面是包含這些手風琴的動態內容的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個警報，每個accordionButton），但用同樣的方法不能做鼠標懸停。這是爲什麼？

來源

2010-11-26 Robert

它可以在[我的測試（http://jsfiddle.net/Ff5Lf/）。它有一些邏輯錯誤，但鼠標懸停工作。 – cambraca 2010-11-26 16:48:24

@robert，它爲我工作也...從cambraca提供的鏈接 – kobe 2010-11-26 16:51:44

我可以讓mouseover爲我工作的唯一方法是如果我將整個「包裝」div移出「內容」div，這樣一個div跟在另一個之後，而不是一個在另一個之內。還有什麼我可以嘗試？ – Robert 2010-11-26 16:55:51

我通過去除啓用動態頁面代碼解決了這個問題。這簡化了代碼並消除了一些複雜性。

上面顯示的代碼的工作原理，我甚至使它更有趣。如果您對此感到好奇，請查看我的test site。

來源

2011-01-20 21:19:04 Robert

鼠標懸停可以很古怪，建議使用的mouseenter

來源

2010-11-26 16:56:28 dovidweisz

我不知道你的要價，但你肯定可以使用一個小的調整你的鼠標懸停功能。

$('.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'); 
    }); 
});

來源

2010-11-26 16:57:49

我在你previous question有一看，有信息有，是不是在這個職位。看起來您正在使用jQuery的函數來填充<div id="content" />。如果你是那麼你需要使用活動綁定而不是標準的綁定功能。

.mouseover(function())是.bind(mouseover,function())的簡寫形式，並且在最初生成DOM後加載的內容不起作用。相反，您應該使用.live(mouseover,function())，它將包含通過函數添加到DOM的所有內容。下面是現場綁定的詳細信息：jQuery's .live() handler

除了這個你應該（如其他人所說）使用mouseenter代替mouseover因爲當你將鼠標懸停在您指定的一個任意元素，後者會火，而後者每個元素或孩子只能發射一次。我已經解釋不好了 - 這裏是和鏈接，更好的信息交互示例：jQuery's mouseenter event

我希望這有助於！

來源

2010-11-28 14:26:31 lnrbob

在2個Div節點中查找JQuery手風琴

回答

相關問題