JQuery UI - 尝试打开手风琴部分,其中手风琴位于不同的标签中

时间:2012-07-25 16:45:58

标签: jquery user-interface tabs accordion

我是JQuery的新手,我在尝试使用函数工作时遇到问题,我在页面选项卡中的JQuery UI手风琴中有一个指向锚点的链接。我在2个标签中有单独的手风琴(2)(@ tab中有1个)。我把一些代码拼凑在一起,有些代码却没有。这就是我所拥有的:

    <script type="text/javascript">
  $(function(){

  // Accordion
  $('#accordion2, #accordion3').accordion({ header: "h3",navigation: true,collapsible: true });

  // Tabs
            $('#tabs').tabs();

            // Tabs                                                                                                              
    var $tabs = $("#tabs").tabs();

    // Handle clicks for on-page accordion section links                                                                                  
   $("a.openTab").click(function(e) {
        var thisName = "";
        var $tabParent = null;
        var tabIndex = 0;
                    var $accordionParent = null;
        var accordionIndex = 0;

        // Prevent default click behavior                                                                            
        e.preventDefault();

        // Get the named anchor from the clicked link's href                                                         
        thisName = $(this).attr("href").split("#")[1];

        // Find the tab parent. Tabs should all have class "tab".                                                    
        $tabParent = $("a[name='" + thisName + "']").closest(".tab");

                    // Find the accordion parent. Accordion should all have class "accTable".                                                    
        $accordionParent = $("a[name='" + thisName + "']").closest(".accTable");

        // Get the index of this tab                                                                                 
        tabIndex = $(".tab").index($tabParent);

                    // Get the index of this accordion                                                                                 
        accordionIndex = $(".accTable").index($accordionParent);
                    // alert(accordionIndex);

        // Open the appropriate tab                                                                                  
        $tabs.tabs("select", tabIndex);

                    // Open the appropriate accordion section
                                            $('.accordionTabs').accordion( "option", "active", accordionIndex );

                    // Scroll down to selected opened accordion                             
              $('html, body').animate({
                            scrollTop:$("a[name='" + thisName + "']").offset().top
                        }, 2000);
    });




        });
    </script>
</head>

<body>

<DIV id=wrapper>

    <BR><BR>
        <a class="openTab" href="#tab1">Target anchor in tab 1</a><BR>
    <a class="openTab" href="#tab2">Target anchor in tab 2</a><BR>
  <a class="openTab" href="#tab3">Target anchor in tab 3</a><BR>
        <a class="openTab" href="#ServicesSkill">Services anchor within tab 2</a><BR>
        <a class="openTab" href="#SolutionsSkill">Solution anchor within tab 2</a><BR>
        <a class="openTab" href="#EducationSkill">Education anchor within tab 3</a><BR>
        <a class="openTab" href="#CustomerSkill">Customer anchor within tab 3</a><BR>
    <BR><BR><BR>



    <!-- Tabs -->
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>

        <div id="tabs-1" class="tab">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a name="tab1">This is a named anchor in tab 1.</a>
        </div>

        <div id="tabs-2" class="tab">
        <p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet 
        ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</p>
   <a name="tab2">This is a named anchor in tab 2.</a>

            <div id="accordion2" class="accordionTabs">
                <div>
                    <h3><a href="#">First</a></h3>
                    <div class="accTable">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
                </div>
                <div>
                    <h3><a href="#">Services</a></h3>
                    <div class="accTable">
                    <a name="ServicesSkill"></a>
                    Phasellus mattis tincidunt nibh.</div>
                </div>
                <div>
                    <h3><a href="#">Solutions</a></h3>
                    <div class="accTable">
                    <a name="SolutionsSkill"></a>
                    Nam dui erat, auctor a, dignissim quis.</div>
                </div>
            </div>          

        </div>

        <div id="tabs-3" class="tab">
            <div id="accordion3" class="accordionTabs">
                <div>
                    <h3><a href="#">Second</a></h3>
                    <div class="accTable">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
                </div>
                <div>
                    <h3><a href="#">Education</a></h3>
                    <div class="accTable">
                    <a name="EducationSkill"></a>
                    Phasellus mattis tincidunt nibh.</div>
                </div>
                <div>
                    <h3><a href="#">Customer</a></h3>
                    <div class="accTable">
                    <a name="CustomerSkill"></a>
                    Nam dui erat, auctor a, dignissim quis.</div>
                </div>
            </div>

        <P>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque
        nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor 
        ullamcorper augue.</P>
  <a name="tab3">This is a named anchor in tab 3.</a>
        </div>
    </div>

它会在我在第一个标签中的第一个手风琴中打开锚点,但是当我在第二个标签中打开第二个手风琴中任何一个锚点的链接时,它会变得不稳定。我修改了我在其他地方找到的'openTab'函数,并添加了代码以尝试让它打开具有锚点的accordion部分。我似乎无法弄清楚我有什么错误,它会打开第一支手风琴中的各个部分,但是当试图在第二个选项卡中的第二个手风琴中打开一个部分时会出错。它似乎正确地找到了手风琴部分的索引以及手风琴所在的标签索引。它要么不打开该部分,要么有时它会选择它并且不会打开该部分内容。尝试使用该功能打开第二个手风琴部分后,手动点击手风琴标题时该部分甚至不会打开。这让我疯狂地试图找出问题所在。有没有人对我做错了什么有任何想法? (对不起,如果编码没有缩进。这是我第一次在这里发帖)谢谢

1 个答案:

答案 0 :(得分:0)

当您查看要打开的折叠式面板的索引时,您正在搜索页面上的所有手风琴面板,而不仅仅是当前手风琴中的那些。这就是为什么你的索引适用于第一个选项卡,而不适用于第二个选项卡。该数字与第一个选项卡中的手风琴面板数量相关。

更改

// Get the index of this accordion                                                                                 
accordionIndex = $(".accTable").index($accordionParent);

// Get the index of this accordion panel within this tab                                                                             
accordionIndex = $accordionParent.closest('.accordionTabs').find('.accTable').index($accordionParent);

补充意见:

  1. 手风琴周围有不必要的div级别 小组
  2. 在尝试设置活动手风琴面板之前,您没有检查以确保您已点击手风琴中包含的锚点
  3. 您应该只更换当前手风琴的活动手风琴面板,而不是所有手风琴面板。
  4. 看看这个:http://jsfiddle.net/3p5QG/