изменить содержание div на hover, jQuery

У меня есть меню <li>, что при наведении слайдов панель вниз, содержащая подменю. (Фиксированный) Теперь мне нужно заполнить это подменю с содержанием, которое изменяется в зависимости от того, какие пункты меню наведен (фиксированный)изменить содержание div на hover, jQuery

последняя проблема:. Я могу только сделать содержание, изменение произойдет, если .click используется вместо .hover ... - есть проблема с использованием 2 x .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

Во-первых, исправьте свою разметку html, правильно используя id и классы.

Идентификаторы являются уникальными идентификаторами, они не могут использоваться более одного раза в одном документе html. Используйте для этого атрибут класса. До сих пор экземпляр, замените <div id="subcontent_container"> на <div class="subcontent_container">

Когда это будет сделано, обновить свой вопрос с новым кодом HTML, я буду обновлять свой ответ с инструкциями на следующей стадии.

источник

2009-10-15 11:02:35 pixeline

sry man, печатал быстрее, чем мой мозг мог идти в ногу с ним :) – OndeFar

Вам будет лучше с 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(); 
    }); 
});

Это также обычно хорошая практика, чтобы гнездиться ваш второй уровень нав внутри LI тег в качестве вложенного списка, это позволит состояние курсора перенести на зависший над вновь показанный код панели (как это ребенок от LI, так что вы все еще технически «OnMouseOver» содержащего LI блока. Это, к сожалению, принять некоторые CSS рестайлинг и абсолютное позиционирование на вложенной UL, но ИМО это будет стоить усилий.

<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) 
    }); 
};

Используя этот формат, вы должны быть в состоянии включить в ваши функции и получить парит работать на hoverin и hoverout. Я буду следить за этим сообщением, чтобы узнать, возникают ли какие-либо другие вопросы. Надеюсь, это поможет.

источник

2009-10-15 13:15:54 Slevin

изменить содержание div на hover, jQuery

ответ

Смежные вопросы