jQuery手風琴摺疊窗格內單擊鏈接

我在我的頁面上創建了手風琴，我希望能夠在每個展開的窗格中都有一些超鏈接的文本。jQuery手風琴摺疊窗格內單擊鏈接

當您點擊鏈接'減少文字'時，它將需要摺疊手風琴。

這怎麼能通過編輯我已經使用的現有代碼來完成？

的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小提琴：http://jsfiddle.net/EA22W/

希望我已經很好地解釋和問題是有道理的。

謝謝

來源

2014-02-19 Tim

哪裏是減少的文字？當你點擊錨時會發生什麼？ – berentrom

我剛剛編輯了HTML，Reduce文本鏈接就在那裏它應該是（它現在什麼都不做）。我只需要點擊該鏈接即可摺疊手風琴窗格。 – Tim

是否可以在[fiddle]（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，謝謝你。似乎工作。我在窗格中添加了一些其他超鏈接作爲內容，當我點擊它們時，它與您的代碼稍有衝突。有沒有辦法讓這個功能只與類「reduce」的鏈接有關？ – Tim

是的，只需將add class reduce替換爲第二個參數中的in on事件，如下所示：.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手風琴摺疊窗格內單擊鏈接

回答

相關問題