JQuery UI Аккордеон (уровень без аккордеона) - PullRequest
Новая
       12

JQuery UI Аккордеон (уровень без аккордеона)

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

У меня есть аккордеонное меню jQuery, и я знаю, что в какой-то момент мне захочется, чтобы один из уровней не раскрылся (поэтому он будет активным, вместо того, чтобы открывать аккордеон), и я не могу понять это или найти документацию о том, как это сделать.

Взгляните на второй уровень моего примера кода. Я попытался оставить его пустым, я попытался открыть и закрыть тег div и я также попробовал то, что вы видите под открывающим и закрывающим тегом UL, и каждый из них заставляет меню гармонировать на этом уровне, оставляя большое пустое место. Есть предложения? 

<script>
$.ui.accordion.animations.superbounce = function(options) {
    this.slide(options, {
            autoHeight: false,
            duration: options.down ? 2000 : 500,
            duration: options.up ? 2000 : 500
    });

}; 
$(document).ready(function() {
    $(function() {
        $( "#accordion" ).accordion({animated: 'superbounce'});
    });
});

</script>
<div id="accordion">
<h3><a href="#">Masters Of Arts</a></h3>

    <ul>
        <li><a href="#">Business Psychology</a></li>
        <li><a href="#">Criminology and Justice Studies</a></li>
        <li><a href="#">Educational Leadership</a></li>
        <li><a href="#">Executive Coaching</a></li>
        <li><a href="#">Health and Wellness Psychology</a></li>
    </ul>

<h3><a href="#">Masters Of Arts</a></h3>

<ul></ul>

<h3><a href="#">Doctor of Philosophy</a></h3>

    <ul>
        <li><a href="#">Business Psychology</a></li>
        <li><a href="#">Criminology and Justice Studies</a></li>
        <li><a href="#">Educational Leadership</a></li>
        <li><a href="#">Executive Coaching</a></li>
        <li><a href="#">Health and Wellness Psychology</a></li>
    </ul>

<h3><a href="#">Doctor of Psychology</a></h3>

    <ul>
        <li><a href="#">Business Psychology</a></li>
        <li><a href="#">Criminology and Justice Studies</a></li>
        <li><a href="#">Educational Leadership</a></li>
        <li><a href="#">Executive Coaching</a></li>
        <li><a href="#">Health and Wellness Psychology</a></li>
    </ul>

<h3><a href="#">Masters Of Arts 2</a></h3>

    <ul>
        <li><a href="#">Business Psychology</a></li>
        <li><a href="#">Criminology and Justice Studies</a></li>
        <li><a href="#">Educational Leadership</a></li>
        <li><a href="#">Executive Coaching</a></li>
        <li><a href="#">Health and Wellness Psychology</a></li>
    </ul>

<h3><a href="#">Masters Of Arts 3</a></h3>

    <ul>
        <li><a href="#">Business Psychology</a></li>
        <li><a href="#">Criminology and Justice Studies</a></li>
        <li><a href="#">Educational Leadership</a></li>
        <li><a href="#">Executive Coaching</a></li>
        <li><a href="#">Health and Wellness Psychology</a></li>
    </ul>

</div>

Ответы [ 2 ]

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

Между @Dave и @Ryan я пришел к ответу. @ Райан имел правильную идею 

<div id="accordion">
    <h3><a class="link" href="yourlink.html">Masters Of Arts</a></h3>
    <ul></ul>
</div>

с @Dave добавив недостающий ингредиент 

$(".link").click(function(e){
   e.stopPropagation();
}

Все, что мне нужно было сделать, это использовать stopPropagation вместо protectDefault, и это помогло, ребята.

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

Что если вы добавите класс в список элементов, для которого вы хотите открыть ссылку: 

<div id="accordion">
    <h3><a class="link" href="yourlink.html">Masters Of Arts</a></h3>
    <ul></ul>
</div>

Затем с помощью jQuery вы можете остановить ссылку на открытие аккордеона: 

$(".link").click(function(e){
    e.preventDefault();
}

Просто к вашему сведению, я на самом деле не проверял это, но, возможно, стоит попробовать.

...