jquery open accordion from link

2020-06-29 17:56发布

站内问答 / jQuery
1566 5 6

What am I doing wrong. The accordion works, but when I try to open it from external link (fx. mysite.com/mypage.php#2) - it wont open the accordion!

My header is:

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
  $(document).ready(function() {
    $("#accordion").accordion({
     active: false,
     collapsible: true,
     autoHeight: false,
     navigation: true,
     header: '.menuitem'
   }); 
   $(".menuitem").click(function(event){
     window.location.hash=this.hash;
   });
  });
  </script>

My html is:

  <div id="accordion">
  <a class="menuitem" href="#1">Header 1</a>
  <!-- accordion panel --><div>
  CONTENT 1</>
  <!-- end accordion panel --></div>
  <a class="menuitem" href="#2">Header 2</a>
  <!-- accordion panel --><div>
  CONTENT 2</>
  <!-- end accordion panel --></div>
  <!-- end accordion -->

5条回答
兄弟一词,经得起流年.
2楼-- · 2020-06-29 18:10

You can do something like this, though not a perfect solution: 

$(document).ready(function() {
    var $hash = window.location.hash;
    var $acc = $hash ? $hash : 1;
    $("#accordion").accordion({
     active: false,
     collapsible: true,
     autoHeight: false,
     navigation: true,
     header: '.menuitem',
     activate: $acc
   });
});

Many changes might be required..

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
3楼-- · 2020-06-29 18:11 
if ($.url().hash.length) {
    var item = $.url().hash;    
    $('#accordion').accordion({active: item - 1}); // since you started numbering at 1 and not 0.
}
查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2020-06-29 18:11

Your accordeon is a dynamic element in your page (driven with some javascript code).

Setting an html anchor in your url (like #2) will not trigger the accordeon code, you are simply instructing the browser to navigate to the anchored element !

You will need to add some javascript code to your page to get the value of the anchor and pass this parameter to your accordeon widget.

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
5楼-- · 2020-06-29 18:16

Here is the working code - Jsfiddle Link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
$(document).ready(function() {

    $("#accordion").accordion({
         active: false,
         collapsible: true,
         autoHeight: false,
         navigation: true,
         header: 'a.menuitem'
    }); 

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

    //get the hash value
    var locationHash = window.location.hash;

    //split the value
    var hashSplit = locationHash.split('#');

    //get the tab number
    var currentTab = hashSplit[1];

    window.setTimeout(function(){
        //open the tab for the current hash
        $("#accordion").accordion({ active: parseInt(currentTab)-1 });
    }, 1000);

});
</script>


</head>



<body>

<div id="accordion">
  <a class="menuitem" href="#1">Header 1</a>
  <!-- accordion panel -->
  <div>
    CONTENT 1  
  </div>

  <a class="menuitem" href="#2">Header 2</a>
  <div>
    CONTENT 2
  </div>
  <!-- end accordion -->
</div>

</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
Viruses.
6楼-- · 2020-06-29 18:17

@Ashis Your code works perfectly only, every DIV has the same size, so, when I have a DIV with 2 lines, there is a lot of white space beneath. When it contains a lot of information, the DIV is nicely filled.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)