如何在悬停时切换jQuery Responsive-Tabs,而不是单击?

时间:2017-10-07 01:17:24

标签: javascript jquery html5

我使用jQuery Responsive-Tabs制作了一个手风琴菜单。单击鼠标即可打开/关闭面板。如何修改此项以在鼠标悬停时打开/关闭面板?

这是我初始化响应标签的方式:

/*==========  Tabs Responsive ==========*/
function TabsResponsive(){
    if($('#tabs-responsive').length){
        $('#tabs-responsive').responsiveTabs({
            rotate: false,
            active:0,
            startCollapsed: 'accordion',
            collapsible: 'accordion',
            animation: 'slide',
            duration:300,
            setHash: false
        });
    }
}

这是我简化的HTML代码:

<div id="tabs-responsive">
    <ul class="nav-tab" id="classifiedMenu">
        <li><a href="#books" aria-controls="books" data-toggle="tab">Books</a></li>
        <li><a href="#sports" aria-controls="sports" data-toggle="tab">Sports</a></li>
    </ul>                                    
    <div id="classifiedContent" class="tab-content overflow-auto">
        <div class="tab-pane classified" id="books">
            <div class="text-content">
                <ul class="classified-links">
                    <li><a href="#">Children</a></li>
                    <li><a href="#">Comics</a></li>
                    <li><a href="#">Cookbooks</a></li>
                </ul>
            </div>
        </div>       

         <div class="tab-pane classified" id="sports">
            <div class="text-content">
                <ul class="classified-links">
                    <li><a href="#">Cycling</a></li>
                    <li><a href="#">Golf</a></li>
                    <li><a href="#">Football</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

查看该插件的自述文件:

https://github.com/jellekralt/Responsive-Tabs/blob/master/README.md

将以下内容添加到您添加可折叠,开始折叠等的设置块中,应该可以正常工作

event: 'mouseover'