2011-06-14 68 views
0

這是我有尚未:如何從同一手風琴或頁面打開jQuery-UI-Accordion部分?

<script type="text/javascript"> 
    $(function() { 
     $("#accordion").accordion({ 
      collapsible: false, 
      autoHeight: false,<br/> 
      navigation: true, 
      header: 'p.menuitem' 
     }); 
     $("p.menuitem a").click(function(event){ 
      window.location.hash=this.hash; 
     }); 
    }); 
</script> 

<div id="accordion"> 
    <div> 
     <p class="menuitem" id="item1"><a href="#item1">Section1</a></p> 
     <div>Phasellus mattis <a href="#item2">tincidunt</a> nibh.</div> 
    </div> 
    <div> 
     <p class="menuitem" id="item2"><a href="#item2">Section2</a></p> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
    <div> 
     <p class="menuitem" id="item3"><a href="#item3">Section3</a></p> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div> 

正如你surely've已經注意到,有一個在手風琴的SECTION1跳過鏈接。 要解決的問題是:由

http://www.domain.tld/index.htm#item2 

而另一個則調用那朵頁面時

  1. 所提到跳躍鏈路防止手風琴部2從開口,

    http://www.domain.tld/index.htm#item1 
    

    http://www.domain.tld/index.htm#item3 
    

    仍然運作良好。

  2. 單擊跳過鏈接將不會打開手風琴的第2部分。 有沒有什麼機會讓事情奏效?我搜索了很多,但沒有成功。

回答

0

這兩個問題都解決了!

<script type="text/javascript"> 
    $(function() { 
     $("#accordion").accordion({ 
      collapsible: false, 
      autoHeight: false, 
      navigation: true, 
      header: 'p.menuitem' 
     }); 

     $("p.menuitem a").click(function(event){ 
      window.location.hash=this.hash; 
     }); 

     if($(location).attr("hash")) $("a[hash="+$(location).attr("hash")+"]").click(); 
    }); 

    function openpanel(section) { 
     $("#accordion").accordion("activate", section); 
    } 
</script> 

<div id="accordion"> 
    <div> 
     <p class="menuitem" id="item1"><a href="#item1">Section1</a></p> 
     <div>Phasellus mattis <a href="#item2" onclick="javascript:openpanel(1)">tincidunt</a> nibh.</div> 
    </div> 
    <div> 
     <p class="menuitem" id="item2"><a href="#item2">Section2</a></p> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
    <div> 
     <p class="menuitem" id="item3"><a href="#item3">Section3</a></p> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div 
+0

請將您的答案標記爲解答。 – CSchulz 2011-06-15 15:04:35

相關問題