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

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

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

javascript menu html jquery hover
person OndeFar    schedule 15.10.2009    source источник
comment
Несколько .hover() работают нормально: jsfiddle.net/PEBhS   -  person Playmaker    schedule 11.06.2012

Ответы (3)


arrow_upward
1
arrow_downward

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

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

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

person pixeline    schedule 15.10.2009
comment
sry man, печатал быстрее, чем мой мозг успевал :) - person OndeFar; 15.10.2009

arrow_upward
1
arrow_downward

Вам было бы лучше использовать 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, поэтому вы все еще технически «наведение мыши» на содержащий блок 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');
});
person Corey Ballou    schedule 15.10.2009

arrow_upward
1
arrow_downward

Я считаю, что при использовании события .hover ваше форматирование должно быть выполнено следующим образом:

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

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

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

person Slevin    schedule 15.10.2009