jquery hover не может найти родительский диапазон - PullRequest
Новая
       16

jquery hover не может найти родительский диапазон

1 голос
/ 27 мая 2011

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

У меня есть страница с неупорядоченным раскрывающимся списком меню, например: 

  <ul class="topnav">
    <span><li><a href="firstitem.php">Contact</a>
        <ul class="subnav">
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="testlink.php">Test Link</a></li>
        </ul>
    </li></span>

    <span><li><a href="seconditem.php">Ministries</a>
      <ul class="subnav">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
      </ul>
    </li></span>
</ul>

В настоящее время мой jquery ссылается на это: 

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        $(this).parent().find("ul.subnav").slideDown('fast');
        $(this).parent().parent("span").hover(function() {
            //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $(this).parent().find("ul.subnav").slideUp('medium');
        });
    });
});

Раскрывающийся список работает, но я не могу найти искомый промежуток, поэтому в настоящее время он никогда не скользит вверх. Любая помощь будет оценена. Спасибо

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

Ответы [ 4 ]

4 голосов
/ 27 мая 2011

Здесь есть несколько проблем.

  1. Не ставьте <li> в <span>.Это нарушает правила проверки html и может вызвать проблемы.

  2. Причина, по которой слайд не работает, заключается в том, что он находится в новой функции, то есть область действия this изменилась.

Код 

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        var $ul = $(this).parent().find("ul.subnav");
        $ul.slideDown('fast');
        $(this).parent().parent("span").hover(function() {
        //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $ul.slideUp('medium');
        });
    });
});

Это должно работать лучше для вас.

1 голос
/ 27 мая 2011

Используйте родителей (селектор) вместо родителей ().

0 голосов
/ 27 мая 2011

В этом случае $ (this) .parent () - это элемент li, $ (this) .parent (). ParenT () - элемент ul class = "subnav", а $ (this) .parent (). parent (). parent () - это тег span.

0 голосов
/ 27 мая 2011

Код работает, за исключением загрузки страницы (то есть, когда вы наводите на него курсор мыши, он начинает работать). Вы должны быть в состоянии сделать: 

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        $(this).parent().find("ul.subnav").slideDown('fast');
        $(this).parent().parent("span").hover(function() {
            //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $(this).parent().find("ul.subnav").slideUp('medium');
        });
    });
    $("ul.subnav").slideUp('medium'); // <-- Note here, but you probably want to hide or something
});

http://jsfiddle.net/SvDAw/

Обратите внимание, это было в FF4.

Примечание

Я не прокомментировал неправильное использование SPAN в UL; это, вероятно, не очень хорошая вещь, как и другое примечание, поскольку она недопустима (вы должны использовать LI и OL / UL в UL / OL). Поэтому вы можете изменить порядок разметки, чтобы либо использовать классы в LI для каждого уровня, либо встраивать некоторые UL в родительский UL (мне больше нравится первый).

...