Accordion滑块未单击其他选项卡上的上一个选项卡

时间:2012-03-18 06:22:07

标签: javascript jquery asp.net accordion jquery-ui-accordion

我正在使用jquery手风琴来显示网站的信息。当用户点击子菜单中的特定链接时,我会打开滑块,如。

设施 - > 1.房间               2.热情好客               绿色步行               4.书籍选项

如果用户单击任何子菜单,则会打开受尊重的手风琴选项卡。用下面的代码我做到了。

      <script type="text/javascript">
        jQuery(function () {
            jQuery("#accordion").accordion();
        });

        jQuery(document).ready(function () {
            $(<%=m_id %>).next().toggle('slow'); //<%=m_id%> the id of every tabs of accordion i pass form the code behind in asp.net

              });
        </script>

HTML:

                       <div id="accordion"> 

                        <h3 id="rooms">
                            a href="#">Rooms</a></h3>
                        <div id="rooms">
                            <p>
                                Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus

                            </p>
                        </div>
                        <h3 id="Hosp">
                            a href="#">Hospitality</a></h3>
                        <div id="Hosp">
                            <p>
                                High Performance team Building, Leadership
                                Development Program, Train the Trainers, Introduction to NLP and Advanced NLP, Fire-Walk
                                etc.
                            </p>

                        </div>
                        <h3 id="green">
                    Green Walk                            
                <div id="green">
                            <p>
                                et malesuada fames ac turpis egestas. Vestibulum
                                ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean
                                lacinia mauris vel est.
                            </p>

                        </div>
                        <h3 id="book">
                            <a href="#">Book Options</a></h3>
                        <div id="book">

                            <p>
                                Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class
                                aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

                            </p>
                        </div>
                    </div>

所以,这里的问题是当用户点击下一个子菜单或点击手风琴中的下一个标签时,前一个标签仍保持打开状态。

如何在下一个标签打开时关闭打开的标签页。

1 个答案:

答案 0 :(得分:0)

我得到那个手风琴可以正常使用这个javascript

 <script type="text/javascript>
    var i=0;
        $(document).ready(function () {          
         jQuery('#accordion').accordion();
         autoHeight: true;
         $('#<%=m_id %>').next().slideDown('slow');
         $(document).click(function(){
         if(i==0){$('#<%=m_id %>').next().slideUp('slow');i++}else{$('#<%=m_id %>').val('');}

         });
        });
    </script>