jQuery: ссылки в древовидном меню не перемещаются, как это исправить?

Question

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

jquery:

   $("#treeMenu li").toggle(

function() {
    $(this).children('ul').slideDown()
    if ($(this).hasClass('contentContainer')) {
        $(this).removeClass('contentContainer').addClass('contentViewing');
    }
}, function() {
    $(this).children('ul').slideUp()
    if ($(this).hasClass('contentViewing')) {
        $(this).removeClass('contentViewing').addClass('contentContainer');
    }
});

html:

<ul id="treeMenu">
    <li class="folder1"> folder1
        <ul style="display: none">
            <li class="contentContainer"><a href="http://www.google.com">1.1</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.2</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.3</a></li>

            <li class="contentContainer"><a href="http://www.google.com">1.4</a></li>

</ul>

jsfiddle

Answer 1

http://jsfiddle.net/Kukd2/3/ Проверка параметров slideToggle и toggleClass.

Answer 2

Работает.Замените js в html-файле.

$("#treeMenu li").click(function() {
    $(this).children('ul').slideToggle();
    if ($(this).hasClass('contentContainer')) {
        $(this).removeClass('contentContainer').addClass('contentViewing');     
    } else if ($(this).hasClass('contentViewing')) {
        $(this).removeClass('contentViewing').addClass('contentContainer');
    }
});​

---

JS, который является неправильным и не позволяет устанавливать текстовые ссылки:

<script type="text/javascript">
    $(document).ready(function() {

    //Class 'contentContainer' refers to 'li' that has child with it.
    //By default the child ul of 'contentContainer' will be set to 'display:none'

        $("#treeMenu li").toggle(           

              function() { // START FIRST CLICK FUNCTION
                  $(this).children('ul').slideDown()
                  if ($(this).hasClass('contentContainer')) {   
                      $(this).removeClass('contentContainer').addClass('contentViewing');
                  }
              }, // END FIRST CLICK FUNCTION

              function() { // START SECOND CLICK FUNCTION
                  $(this).children('ul').slideUp()

                  if ($(this).hasClass('contentViewing')) {
                      $(this).removeClass('contentViewing').addClass('contentContainer');
                  }
                    } // END SECOND CLICK FUNCTIOn
                ); // END TOGGLE FUNCTION 

    }); // END DOCUMENT READY

</script>

---

Как этот сайт или меню дерева JQuery, имеет загружаемый ZIP.http://mediamilan.com/how-to-create-simple-tree-structure-menu-using-jquery-and-css/

* ИЗМЕНИТЕ JS на странице под заголовком, потому что это неправильно.Это позволяет вам установить href или ссылку.

Answer 3

Из документации на .toggle (событие) :

Поскольку .toggle () внутренне использует обработчик щелчков для своей работы, мы должны отменить привязку щелчка, чтобы удалить поведение, связанное с .toggle (), чтобы другие обработчики щелчков могли попадать в перекрестный огонь. Реализация также вызывает .preventDefault () для события, поэтому ссылки не будут отслеживаться и кнопки не будут нажиматься, если для элемента был вызван .toggle ().

Похоже, это то, что с тобой происходит. Вы можете добавить функцию щелчка обратно с помощью нескольких строк jQuery:

$('a').click(function() {
    location.href = $(this).attr('href');
});​

(Это не будет работать в скрипке, но должно работать на вашем сайте.)

Однако мне не нравится, как .toggle молча отменяет другие события щелчков, и это может вас удивить в будущем, поэтому я заменил бы ваш .toggle на правильный .click и использовал бы * 1020. *.slideToggle вместо:

$("#treeMenu li").click(function() {
    $(this).children('ul').slideToggle();
    if ($(this).hasClass('contentContainer')) {
        $(this).removeClass('contentContainer').addClass('contentViewing');
    } else if ($(this).hasClass('contentViewing')) {
        $(this).removeClass('contentViewing').addClass('contentContainer');
    };
});​

Вы также можете использовать .toggleClass внутри обработчика кликов, чтобы сократить ваш код, но я не могу быть уверен, как вы хотите, чтобы классы добавлялись или удалялись на основе вашей скрипки.

http://jsfiddle.net/Kukd2/6/