jquery手風琴內容沒有隱藏在第二次點擊

我有一個jQuery手風琴腳本，它的工作原理是我想要的。jquery手風琴內容沒有隱藏在第二次點擊

但是，理想情況下如果您想關閉打開的內容，應該在第二次點擊。

Like bootstrap accordion here.而我沒有使用這個，因爲我的菜單是動態的，只有一個'ID'（如果你想知道爲什麼我不使用這個）。

但是，我的腳本沒有像上面的例子那樣關閉打開的內容。

任何建議，以使這一工作作爲引導手風琴那樣順利？

我的HTML：

<div id="wrapper"> 
    <div class="accordionButton">monday</div> 
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br />more weather</div> 
    <div class="accordionButton">tuesday</div> 
    <div class="accordionContent">sunny<br /><br /><br /><br /><br />more weather</div> 
    <div class="accordionButton">wednesday</div> 
    <div class="accordionContent">sunny<br />more weather</div> 
    <div class="accordionButton">thursday</div> 
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />more weather</div> 
</div>

的Javascript：

$(document).ready(function() { 

//ACCORDION BUTTON ACTION 
$('div.accordionButton').click(function() { 
    $('div.accordionContent').slideUp('normal');  
    $(this).next().slideDown('normal'); 
}); 

//HIDE THE DIVS ON PAGE LOAD  
$("div.accordionContent").hide(); 

});

任何幫助，將不勝感激。

來源

2014-05-14 Manu

使用切換。我認爲它會奏效。 –

爲什麼不使用jQuery的手風琴而不是自己構建？ –

您可以嘗試既擴大，如果隱藏

 if(!$(this).next().is(':visible')) 
    { 
     $(this).next().slideDown('normal'); 
    }

嘗試here

來源

2014-05-14 12:36:17

這是完美的，謝謝。 – Manu

我改變了連接小提琴檢查這個.. JSFiddle

我改劇本如下。

$('div.accordionButton').click(function() { 
    if($(this).hasClass("expanded")){ 
    $(this).next().slideUp('normal'); 
     $(this).removeClass('expanded'); 
    } 
    else{ 
    $(this).addClass("expanded"); 
    //$('div.accordionContent').slideUp('normal'); 
    $(this).next().slideDown('normal'); 
    } 
}); 

//HIDE THE DIVS ON PAGE LOAD  
$("div.accordionContent").hide();

}）;

來源

2014-05-14 12:38:23 Madhu

謝謝，但是如果你點擊新的內容，這不會關閉以前的內容。這種改變整個功能，不理想。 – Manu

試試這個，它會爲您提供全部展開/摺疊所有功能。

網址：http://accordion-cd.blogspot.com/

來源

2014-05-14 12:46:52

但是，仍然不能解決關閉第二次點擊問題 – Manu

修改後的插件，其工作正常。 –

結帳演示：http：//accordion-cd.blogspot.com/2014/05/demo-2-collapse-selected。HTML –

這是我能想到的最輕的版本：

$(document).ready(function() { 
$('.accordionButton').click(function(){ 
    $('.accordionContent').slideUp(300); 
    if(!$(this).next('.accordionContent').is(':visible')) {     
     $(this).next('.accordionContent').slideDown(300); 
    } 
}); });

來源

2014-05-14 13:00:22 RazvanDH

這將工作

$(document).ready(function() { 

//ACCORDION BUTTON ACTION 
$('div.accordionButton').click(function() { 
    $('div.accordionContent').removeClass('active').addClass('inactive');  
    $(this).next().removeClass('inactive').addClass('active').slideDown('normal'); 
    $('div.inactive').slideUp('normal'); 

}); 
//HIDE THE DIVS ON PAGE LOAD  
$("div.accordionContent").hide(); 

});

這裏是小提琴jsfiddle.net/wTLLP/

來源

2014-05-14 13:11:01 Gajen

添加數據在悼念檢查條件。

$(document).ready(function() { 

    //ACCORDION BUTTON ACTION 
    $('div.accordionButton').click(function() { 
     if($(this).data("slided") === true) { 
      $(this).next().slideUp('normal'); 
      $(this).data("slided", false); 
     } else { 
      $('div.accordionContent').slideUp('normal');  
      $(this).next().slideDown('normal'); 
      $(this).data("slided", true); 
     } 
    }); 

    //HIDE THE DIVS ON PAGE LOAD  
    $("div.accordionContent").hide(); 

});

演示 - JSFIDDLE

來源

2014-05-14 13:22:08 Sudharshan

jquery手風琴內容沒有隱藏在第二次點擊

回答

相關問題