带外部链接的开放式手风琴 [英] open accordion with external link

查看:47
本文介绍了带外部链接的开放式手风琴的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用外部链接打开手风琴.实际上页面上有三个主要手风琴(关于,结果,联系方式)

i am trying to open the the accordion using external link..Actually there are three main accordions on the page(about,results,contact)

,并且有一个菜单栏,其中包含项目(关于,结果,联系方式).

and there is a menubar with items(about,results,contact).

我想要的是,当我单击 about 菜单项时,它应该打开About手风琴

what i want is when i click on about menu item it should open the about accordion

以下是jquery代码

the below is jquery code

$(function() {

    $( "#accordion" ).accordion({              
        collapsible: true,
        autoHeight: false , 
        active: false,
        navigation:true,       

    }); 

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

以下是html菜单栏代码:

The below is html menubar code:

    <div id="navmenu" style='z-index:9999;'>
      <ul>
        <li><a href="#anchor_about" class="anchor_about">About</a></li>
        <li><a href="#" >Results</a></li>
       <li><a href="#" class ="anchor_contact">Contact</a></li>
      </ul>
    </div>

及以下是外部链接的jquery代码

and below is jquery code for external link

    <script>

     $(document).ready(function(){

     $('a.anchor_about').click(function(){

     $("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

 return false;

  });
   });

   </script>

但不起作用..:(

有人知道吗? 预先感谢

anyone knows about same? thanks in advance

EDIT1

<script>

 $("#navmenu ul").children("li").click(function()
 {
  $("#accordion").accordion("activate", <?php echo (int)$_GET['id']; ?>);
});

EDIT2

下面是手风琴代码

        <div class="demo">                      

            <div id="accordion">                                                       <!--- main accordion 1 demo-->
                <h3><a href="#anchor_home"></a></h3>                            
                    <div id="accordion1" style="margin-bottom:17px;"  >
                        <h1><a href="#" ></a></h1>
                            <div id="content_our_offer" >                              <!--- sub accordion 1 demo-->
                                <?php $page_id=1742;?>                      
                                <?php get_page( $page_id ) ;
                                $page_data = get_page( $page_id );
                                echo '<h3>'. $page_data->post_title .'</h3>';// echo the title
                                echo apply_filters('the_content', $page_data->post_content); ?>              
                            </div>

                    <div style="margin-top:20px;">                                   <!--- sub accordion 2 demo-->
                        <h2  ><a href="#" ></a></h2>    </div>          
                            <div id="content_our_offer" >
                                <?php $page_id=1742;?>                      
                                <?php get_page( $page_id ) ;
                                $page_data = get_page( $page_id );
                                echo '<h3>'. $page_data->post_title .'</h3>';// echo the title
                                echo apply_filters('the_content', $page_data->post_content); ?>              
                            </div>

            </div>


            <div style="margin-top:20px;">
            <h6><a class="exlnk" href="#about" title="About" ></a></h6>   </div>                                              <!--- main accordion 2 demo-->     
                <div id="id_ourresults">
                    <?php
                        $directory = 'our_results'; 
                        try {    
                            // Styling for images

                            foreach ( new DirectoryIterator("../" . $directory) as $item ) {            
                                if ($item->isFile()) {
                                    echo "<div class=\"expand_image\">";
                                    $path = "/" . $directory . "/" . $item;
                                    echo "<img src=\"" . $path . "\" width=861 height=443  />";
                                    echo "</div>";
                                    }
                                }
                            }
                            catch(Exception $e) {
                            echo 'No images found for this player.<br />';
                            }


       ?>




                </div>          
                <div style="margin-top:20px;">


            <h4><a href="#anchor_contact"></a></h4> </div>                                          <!--- main accordion 3 demo-->
                <div id="id_contactus">      
                    <?php $page_id=1791 ;?>
                    <?php get_page( $page_id ) ;
                    $page_data = get_page( $page_id );
                    echo '<h3>'. $page_data->post_title .'</h3>';// echo the title
                    echo apply_filters('the_content', $page_data->post_content); ?>              
                </div>        

            </div>

    </div><!-- End demo -->

推荐答案

$('a.anchor_about').click(function(){

   $("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

   return false;

});

我认为手风琴激活行中的$ _GET ['id']不会起作用,因为我想您想要这样的东西

I don't think $_GET['id'] in the accordion activate line is going to work as I guess you want something like this

$('a.anchor_about').click(function(){
   var sectionId = $(this).attr("href");
   $("#accordion").accordion("activate", sectionId);

   return false;

});

检查是否可行-如果有任何错误让我知道.

check if this works - if there are any errors let me know.

编辑**

EDIT **

此外,我认为要打开手风琴,您需要一个基于index的值,而不是一个像#someId这样的ID值(肯定适用于制表符).索引是从零开始的,因此可以通过传递零值来激活手风琴的第一部分,第二个是1,以此类推.

Also, I think to open accordion you need an index based value not a ID value like #someId (which works for tab for sure). The index is zero-based so that first section of accordion can be activated by passing a zero value, second with 1, and so on.

这篇关于带外部链接的开放式手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆