2012-03-27 185 views
0

我一直在瀏覽公平,而我仍然在尋找相關答案。我想要我的隱藏divs都是同一個類滑動,但是當一個滑動另一個打開關閉。此外,我希望只顯示信息/隱藏信息更改爲正在切換的div。Jquery Slidetoggle多個滑動div

這裏是我的html

<p> 
    <a class="opener" href="javascript:slideTogle();">Click Here For Information</a> 
</p> 
<div class="content"> 
    <p>If you are looking to purchase your first home, reduce your existing monthly 
     repayments, pay off you mortgage early, raise cash for home improvements 
     or to pay off debt or even buy a property to let out we are able to assist 
     and advise you from start to finish. We have access to a wide range of 
     lenders offering independent mortgages to suit you.</p> 
    <p>Your home may be repossessed if you do not keep up repayments on your 
     mortgage.</p> 
    <ul> 
     <li>First time Buyers</li> 
     <li>Remortgages</li> 
     <li>Capital raising</li> 
     <li>Debt Consolidation</li> 
     <li>Buy To Let</li> 
    </ul> 
</div> 

,這裏是我的javascript

$(document).ready(function() { 
    // put all your jQuery goodness in here. 
    $('.content').hide(); 
    $('.content.open').show(); 

    $('.opener').click(function() { 


     $(this).parent().next('.content').slideToggle(300, function() { 
      $(".opener").text($(this).is(':visible') ? "Hide Information" : "Click Here For Information"); 
     }); 
    }); 
}); 

我是新來的jQuery/JavaScript,但我有PHP的基本知識和HTML良好的知識/ CSS 。

謝謝

+0

$(文件)。就緒(函數(){// 把你所有的jQuery的善良在這裏 VAR showText = '點擊查看更多信息&#9658'。 VAR HIDETEXT =「隱藏信息與#9660 '; \t $(' content.open。 ')顯示(); \t $(' 開門紅 ')點擊(函數(){ \t $(本).parent()下一個(。' 'content')。slideToggle('slow'); \t //開關可見性 \t $(this).data('is_visible',!$(this).data('is_visible')); \t //根據元素是顯示還是隱藏來更改鏈接 \t $(this).html((!$(this).data('is_visible'))? showText:hideText); $('。parent,.child')。hide(); \t});}); – user1296747 2012-03-28 22:36:43

回答

0

this

$(document).ready(function() { 
    // put all your jQuery goodness in here. 

    $('.opener').click(function (e) { 
     var $opener = $(this); 
     var $content = $opener.parent().next('.content');   

     e.preventDefault(); 

     $content.toggleClass('open').slideToggle(300, function(){ 
      $opener.text($content.hasClass('open')?"Hide Information":"Click Here For Information"); 
     }); 

    }); 
});​ 
+0

我在下面的評論中粘貼了我的最新代碼,現在的問題是我有多個div,在打開選定的 – user1296747 2012-03-28 22:34:30

+0

時關閉了一個我已經更改了代碼,以便所有手風琴都可以獨立運行。 – Sinetheta 2012-03-29 03:04:38

+0

它根本不會使用此代碼打開div。感謝您的幫助。 – user1296747 2012-03-29 07:58:39