JQuery Аккордеонное Меню - PullRequest
Новая
       8

JQuery Аккордеонное Меню

0 голосов
/ 28 октября 2010

Это просто действительно новый вопрос о jQuery, но я просто использую его для создания простого аккордеонного меню. Выход HTML выглядит следующим образом: 

<ul id="nav-sub">
<li class="sub-level-0"><a href="#">Menu Item One</a></li>
<li class="parent-here last sub-level-0"><a href="#">Menu Item Two</a>   
    <ul>
        <li class="here sub-level-1"><a href="#">Sub Menu Item One</a></li>
        <li class="last sub-level-1"><a href="#">Sub Menu Item Two</a></li>
    </ul>  
</li>

А jQuery, который у меня сейчас есть: 

$(document).ready(function() {

// Show the children of the first product on page load but leave the others hidden
$("ul#nav-sub li.parent-here ul").show();

// Then attach a visibility toggle to each of the parents 
if ( $("ul#nav-sub li.sub-level-0 ul").size > 0 ) {
    $("ul#nav-sub li.sub-level-0 > a").click(function(){
        $(this).next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });
}

});

Это самое близкое, что я могу заставить его работать полностью, но единственное, что не работает, это анимация переключения. Вместо медленного перехода он просто прыгает прямо при открытии.

То, что я в основном хочу, это получить эффект медленного перехода, но ТАКЖЕ возвращать значение false (предотвращать действие браузера по умолчанию после привязки ссылки), если у элемента меню есть дочерние элементы (подсписок - как показано выше в пункте меню Два). Мне нужен первый пункт меню, чтобы вернуть true и перейти прямо к этой странице.

Спасибо

Ответы [ 2 ]

0 голосов
/ 06 марта 2012

HTML: 

<dl>

<dt><a href="#">Menu Item One</a></dt>
<dd>
    <ul> 
        <li><a href="#">Sub Menu Item One</a></li>        
    </ul>
</dd>

<dt><a href="#">Menu Item Two</a></dt>
<dd>
    <ul> 
        <li><a href="#">Sub Menu Item One</a></li> 
        <li><a href="#">Sub Menu Item Two</a></li> 
    </ul>
</dd>

<dt><a href="#">Menu Item Three</a></dt>
<dd>
    <ul> 
        <li><a href='#'>Sub Menu Item One</a></li> 
        <li><a href='#'>Sub Menu Item Two</a></li> 
        <li><a href='#'>Sub Menu Item Three</a></li>            
    </ul>
</dd>

</dl>

JQuery: 

<script>
    $("dd").hide();

    $("dt a").click(function(e) {
        $(e.target).parent().next().slideToggle();
    });
</script>
0 голосов
/ 28 октября 2010

Мне нравится ты, и мне нравится разбираться с вещами, чтобы учиться ... Я думал, что это будет легко, но, черт возьми, я потратил 30 минут на отладку этой чертовой вещи ..

Смотри http://jsfiddle.net/QcBNK/92/

Html: 

<ul id="nav-sub">
    <li class="sub-level-0"><a href="#">Menu Item One</a>
    <ul>
        <li class="sub-level-1"><a href="#">Sub Menu Item One</a></li>
        </ul>
      </li>
     <li class="sub-level-0"><a href="#">Menu Item Two</a>   
      <ul>
                <li class="sub-level-1"><a href="#">Sub Menu Item One</a></li>
                <li class="sub-level-1"><a href="#">Sub Menu Item Two</a></li>
      </ul>  
      </li>    
</ul>

JQuery: 

$(document).ready(function() {
    //hide all SUB elements
    $(".sub-level-1").hide(); 
    //attach click to top elements only
    $("li.sub-level-0").mousedown(function(evt) {
        //find the sub element and toggle it..
       if(($(evt.target).text().indexOf("Sub"))!=0) {//Bad hack! sry =(
        $(this).find("ul .sub-level-1").slideToggle();
      }
    });

});

Примечания: Я не эксперт. Позже я заметил, что элементы подпунктов генерируют событие,и как ни странно find () возвращает дочерний элемент <ul>, даже если подэлемент вызвал событие !?Поэтому я не мог использовать evt.target==this для проверки на всплывающее событие.Событие sub elements возвращает весь родительский li!= S Так я бросил взломать!Может быть, есть лучший метод.

...