jQuery Accordion collapse on click link внутри панели

Я создал аккордеон на своей странице, и я хотел бы иметь некоторый текст с гиперссылками в каждой расширенной панели.jQuery Accordion collapse on click link внутри панели

Когда вы нажимаете на ссылку «Уменьшить текст», ей необходимо будет свернуть аккордеон.

Как это можно сделать, отредактировав существующий код, который я использовал?

JQuery:

$(function() { 
    $("#accordion").accordion({ 
     active: false, 
     collapsible: true, 
     heightStyle: "content", 
     navigation: true, 
     header: ".menuitem" 
    }); 

    var hash = window.location.hash; 
    var anchor = $('a[href$="'+hash+'"]'); 
    if (anchor.length > 0){ 
     anchor.click(); 
    } 
});

HTML:

<div id="accordion"> 
<h3 class="menuitem">Item 1</h3> 
<div> 
<p>Blah blah blah</p> 
<a href="#">Reduce text</a> 
</div> 

<h3 class="menuitem">Item 1</h3> 
<div> 
<p>Blah blah blah</p> 
<a href="#">Reduce text</a> 
</div> 

<div id="accordion"> 
<div> 
<h3 class="menuitem">Item 1</h3> 
<p>Blah blah blah</p> 
<a href="#">Reduce text</a> 
</div></div>

JS Fiddle: http://jsfiddle.net/EA22W/

Надежда Я объяснил хорошо, и вопрос имеет смысл.

Thanks

источник

2014-02-19 Tim

Где уменьшить текст? И что происходит, когда вы нажимаете якорь сейчас? – berentrom

Я только что отредактировал HTML, сокращенная текстовая ссылка там, где она должна быть (в данный момент она ничего не делает). Мне просто нужна эта ссылка, чтобы свернуть панель аккордеона при нажатии. – Tim

вы можете создать минимальный пример в [скрипке] (http://jsfiddle.net). – Jai

Я добавил на мыши событие на анкерный элемент, который закрывает соответствующий ему аккордеон пункт:

$(function() { 
$("#accordion").accordion({ 
    active: false, 
    collapsible: true, 
    heightStyle: "content", 
    navigation: true, 
    header: ".menuitem" 
}); 

var hash = window.location.hash; 
var anchor = $('a[href$="'+hash+'"]'); 
if (anchor.length > 0){ 
    anchor.click(); 
} 

//$("#accordion").on('click', '.ui-accordion-content a', function(){ 
$("#accordion").on('click', '.ui-accordion-content .reduce', function(){ //edit 
    $(this).parent().slideToggle(); 
}); 
});

источник

2014-02-19 12:32:17

Hi @Andrei Cristian Prodan, спасибо за это. Кажется, работает. Я добавил некоторые другие гиперссылки в качестве содержимого внутри панелей, и когда я нажимаю на них, он слегка конфликтует с вашим кодом. Есть ли способ сделать эту единственную функцию на ссылках с классом «уменьшить»? – Tim

Да, просто замените класс add add на in in event при втором параметре следующим образом: .on ('click', '.ui-accordion-content a.reduce', function() .... –

или со временем просто уйти это как .reduce вместо a.reduce, потому что, возможно, в будущем вы захотите превратить этот якорь в div или другой элемент. –

Вот код, который может вам помочь.

Код

function accordianReduce(){ 
    $("#accordion").accordion({ 
     active: false, 
     collapsible: true, 
     heightStyle: "content", 
     navigation: true, 
     header: ".menuitem" 
    }); 
} 
accordianReduce() 
$('.reduce').on('click', function(){ 
    accordianReduce() 
})

Fiddle Demo

источник

2014-02-19 12:28:28

Спасибо за код Rakesh. – Tim

jQuery Accordion collapse on click link внутри панели

ответ

Смежные вопросы