更改懸停的div的內容，jQuery

我有一個菜單<li>，當徘徊幻燈片包含子菜單的面板。（固定）現在我需要填寫與變化取決於該菜單項盤旋內容的子菜單（固定）更改懸停的div的內容，jQuery

最後一個問題：我只能讓內容改變發生，如果。點擊使用而不是.hover ... - 在同一個元素上使用2個.hover是否存在問題？

<html> 
[.......] 
<body> 

    <div id="head_menu"> 
     <div id="navmain"> 
     <ul> 
      <li id="menu1"><a class="open" href="#">Menu 1</a></li> 
      <li id="menu2"><a class="open" href="#">Menu 2</a></li> 
     </ul> 
     </div> 
    </div> 
    <div id="toppanel"> 
    <div id="panel"> 
     <div id="subcontent_wrap"> 

     <div id="submenu1" style="display:none;"> 
      <div class="subcontent_container"> 
      <h1>Head</h1> 
      <p>content </p> 
      </div> 
      <div class="subcontent_container">more content</div> 
     </div> 

     <div id="submenu2" style="display:none;"> 
      <div class="subcontent_container"> 
      <h1>Head</h1> 
      <p>content </p> 
      </div> 
      <div class="subcontent_container">more content</div> 
     </div> 
     </div> 
    </div> 

<script> 


var slideOpen = false; 
var toggling = false; 
function slidein() { 
clearTimeout(toggling); 
if (!slideOpen) 
     $("#panel").slideDown("fast"); 
else 
    $("#panel").show(); 
slideOpen = true; 
$(this).addClass("active"); 
return false; 
} 
function slideout() { 
if (!slideOpen) 
     $("#panel").hide(); 
else 
    $("#panel").slideUp("fast"); 
slideOpen = false; 
$(this).removeClass("active"); 
return false; 
} 
function unhover() { 
clearTimeout(toggling); 
toggling = setTimeout(slideout, 300); 
} 

$(".open").hover(slidein, unhover); 



$(function() { 
    $("#navmain li").click(function() { 
     var $this = $(this); 
     $("#subcontent_wrap div").hide(); 
     $("#submenu" + $this.attr("id").replace(/menu/, "")).show(); 
     $("#navmain li").css("font-weight", "normal"); 
     $this.css("font-weight", "bold"); 
    }); 
}); 
</script> 

</body> 
</html>

來源

2009-10-15 OndeFar

多個.hover（）工作正常：http://jsfiddle.net/PEBhS/ – Playmaker 2012-06-11 12:55:00

首先，通過正確使用id和類來更正你的html標記。

Id是唯一標識符，它們不能在同一個html文檔中多次使用。爲此使用class屬性。到目前爲止，例如，通過<div class="subcontent_container">

當完成後，更新與新的HTML代碼，你的問題代替<div id="subcontent_container"> ，我會在接下來的步驟說明更新我的答案。

來源

2009-10-15 11:02:35 pixeline

sry男人，打字速度比我的腦子能跟得上:) – OndeFar 2009-10-15 11:47:13

你最好用onmouseover/onmouseout，因爲當用戶不再徘徊LI時，你有一個回調狀態來隱藏菜單。

// this will only work for hover 
// you will need a separate binding on the A tag to make 
// the panel stick 
$('#navmain li').mouseover(function() { 
    var id = $(this).attr('id'); 
    var subId = 'sub' + id; 
    // show the sub menu 
    $(subId).fadeIn(1, function() { 
     // slide down top panel 
     $('#toppanel').slideDown('fast'); 
    }); 
}, 
// this callback refers to the onmouseout state 
function() { 
    // hide the top panel 
    $('#toppanel').slideUp('fast', function() { 
     // hide content again 
     $(subId).hide(); 
    }); 
});

這也是比較好的做法是嵌套的L1標籤爲嵌套列表內的第二級資產淨值，這將使鼠標懸停狀態結轉到懸停在新顯示面板的代碼（因爲它是一個孩子在李的，所以你在技術上還「的onmouseover」含Li塊的，這將不幸需要一些CSS改型和絕對定位的嵌套的UL，但IMO這將是值得的。

<div id="head_menu"> 
    <div id="navmain"> 
    <ul> 
     <li id="menu1"> 
     <a class="open" href="#">Menu 1</a> 
     <ul style="display:none"> 
      <li> 
      <div id="submenu1" style="display:none;"> 
       <div class="subcontent_container"> 
       <h1>Head</h1> 
       <p>content </p> 
       </div> 
       <div class="subcontent_container">more content</div> 
      </div> 
      </li> 
     </ul> 
     </li> 
     <li id="menu2"> 
     <a class="open" href="#">Menu 2</a> 
     <ul style="display:none"> 
      <li> 
      <div id="submenu2" style="display:none;"> 
       <div class="subcontent_container"> 
       <h1>Head</h1> 
       <p>content </p> 
       </div> 
       <div class="subcontent_container">more content</div> 
      </div> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div>

它還有簡化jQuery和減少一些不必要的標籤的額外好處。

// this version coupled with the above HTML changes 
// will allow the UL panel to remain open until 
// you mouse out 
$('#navmain li').mouseover(function() { 
    $(this).find('ul').slideDown('fast'); 
}, 
// this callback refers to the onmouseout state 
function() { 
    $(this).find('ul').slideUp('fast'); 
});

來源

2009-10-15 12:40:22

我使用.hover事件，當你的格式將需要這樣做相信：

function border() { 
$('ELEMENT').hover(function() { 
     $(this).stop().animate({height:"290"},200) }, 

function() { 
     $(this).stop().animate({height:"150"},200) 
    }); 
};

使用這種格式，你應該能夠在你的職責，堵塞並獲得懸停上下工夫懸停和翱翔。我會密切關注這篇文章，看看是否有其他問題出現。我希望這有幫助。

來源

2009-10-15 13:15:54 Slevin

更改懸停的div的內容，jQuery

回答

相關問題