JQuery Аккордеонный вопрос - PullRequest
Новая
       4

JQuery Аккордеонный вопрос

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

Я пытаюсь использовать пользовательский интерфейс jQuery в соответствии с открытием слайдов в некоторых DIV. Я хочу, чтобы ссылки располагались в другом месте и предназначались для конкретных DIV, зависящих от их ID. Как бы я поступил так? Любые советы, чтобы указать мне в правильном направлении?

Что-то вроде этого: 

<script>
    jQuery().ready(function() {
        jQuery("#accordion" ).accordion({ 
            collapsible: true, 
            active: false, 
            navigation: true 
        });
    });
</script>

и 

<h3><a href="#1">Section 1</a></h3>
<h3><a href="#2">Section 2</a></h3>
<h3><a href="#3">Section 3</a></h3>
<h3><a href="#4">Section 4</a></h3>

<div id="accordion">
    <div id="1">
        <p>content</p>
    </div>
    <div id="2">
        <p>content</p>
    </div>
    <div id="3">
        <p>content</p>
    </div>
    <div id="4">
        <p>content</p>
    </div>
</div>

Ответы [ 4 ]

2 голосов
/ 26 мая 2011

Вы можете использовать метод активации.

Подпись: 

.accordion( "activate" , index )

Программная активация части содержимого Accordion.Индекс может быть числом с нулевым индексом, чтобы соответствовать позиции заголовка, который нужно закрыть, или селектором, соответствующим элементу.Передайте false, чтобы закрыть все (возможно только с collapsible: true).

При покупке с использованием $(link).click(function(){}) вы можете выбрать идентификатор элемента, по которому щелкнули, и передать идентификатор в индексе метода активации, например: 

.accordion( "activate" , "#" + id);
0 голосов
/ 26 мая 2011

Вот jsfiddle решения.

Слегка измененный HTML: (обратите внимание на атрибуты class и href): 

<h3><a class='acc-link' href="#1">Section 1</a></h3>
<h3><a class='acc-link' href="#2">Section 2</a></h3>
<h3><a class='acc-link' href="#3">Section 3</a></h3>
<h3><a class='acc-link' href="#4">Section 4</a></h3>

<div id="accordion">
    <h3 id="1"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="2"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="3"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="4"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
</div>

JS с использованием метода activate : 

jQuery().ready(function() {
    var acc = $("#accordion").accordion({
            collapsible: true,
            active: false,
            navigation: true
    });

    $('.acc-link').click(function () {
        acc.accordion("activate", $(this).attr('href'));
    });
});

Следует отметить одну вещь: аргумент атрибута href, передаваемый в метод activate, интерпретируется как селектор CSS, который удобно (и по совпадению) начинается с селектора #, поэтому он «просто работает» с действительный идентификатор.

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

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

Например, со следующей разметкой гармошкой: 

<a href='' id='activateAccordion' />

<div id="accordion">
    <h3><a href="#section1">Section 1</a></h3>    
    <div id="section1">
        <p>content</p>
    </div>
    <h3><a href="#section2">Section 2</a></h3>
    <div id="section2">
        <p>content</p>
    </div>
</div>

При нажатии на ссылку «activAccordion» раздел 1 может скользить вниз, например: 

$('#activateAccordion').click(function() {
    $('a ##section1').click();
});
0 голосов
/ 26 мая 2011

Вы хотите что-то, что больше похоже на это.

<div id="accordion">
    <h3><a href="#1">Section 1</a></h3>    
    <div id="1">
        <p>content</p>
    </div>
    <h3><a href="#2">Section 2</a></h3>
    <div id="2">
        <p>content</p>
    </div>
    <h3><a href="#3">Section 3</a></h3>
    <div id="3">
        <p>content</p>
    </div>
    <h3><a href="#4">Section 4</a></h3>
    <div id="4">
        <p>content</p>
    </div>
</div>
...