qToggle是一个通用的jQuery内容切换插件，允许您使用淡入淡出或幻灯片动画切换元素的可见性，并管理这些元素上的CSS类以进行样式设置。

它可以用于多种用例，例如创建动态下拉菜单、按需显示隐藏内容，或根据用户偏好管理元素的外观。

如何使用它:

1.下载并加载jquery.qtoggle.js插件。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>
 
<!-- jQuery qToggle Plugin -->
<script src="/path/jquery.qtoggle.js"></script>

2.将插件附加到具有数据属性“data-qtoggle-selector”的所有元素。

$(function(){
  $('body').qToggle();
});

3.创建可切换的元素，如下所示。

<!-- Basic Usage -->
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-text="Show Info" >
   Hide Info
 </a>
<div class="target">
  I am the div that you can hide and show.
</div>
 
<!-- Toggle The Prev Element -->
<a href="#" 
   data-qtoggle-selector="prev" >
   Toggle
</a>
 
<!-- Toggle The Next Element -->
<a href="#" 
   data-qtoggle-selector="next" >
   Toggle
</a>
 
<!-- Toggle The Parent Element -->
<a href="#" 
   data-qtoggle-selector="parent" >
   Toggle
</a>
 
<!-- Toggle The Siblings -->
<a href="#" 
   data-qtoggle-selector="siblings" >
   Toggle
</a>
 
<!-- Toggle The Element Itself -->
<a href="#" 
   data-qtoggle-selector="self" >
   Toggle
</a>

4.在切换时对元素应用淡入淡出或滑动动画。

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="fadeOut">
   Fade Out
</a>
 
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="show">
   Don't toggle
</a>
 
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="fadeToggle">
   Fade Toggle
</a>
 
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle">
   Slide Toggle
</a>
 
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle"
   data-qtoggle-easing="swing">
   With Easing
</a>
 
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle"
   data-qtoggle-duration="900">
   Configurable Duration
</a>
 
<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-effect="slideToggle"
   data-qtoggle-callback="exampleCallback">
   With A Callback
</a>

5.切换targer元素的CSS类。

<a href="#" 
   data-qtoggle-selector=".target" 
   data-qtoggle-class="important" 
   data-qtoggle-effect="toggleClass">
   Toggle CSS Class
</a>
<div class="target important">
  This text is red when class 'important' is applied.
</div>

6.所有可能的插件选项。

$('body').qToggle({
 
  // object - passed into event (reserved for later use)
  'data': {},
 
  // string - the animation effect on target        
  'effect': 'toggle',
 
  // string - the event on control (namespaced)    
  'events': 'click.qToggle',
 
  // string - a selector that defines a control
  'context': '[data-qtoggle-selector]',
 
  // string - the name of the data that holds selector string of target
  'selector': 'qtoggle-selector',
 
  // string - the default target if none is specified in settings.selector  
  'targets': 'prev',
 
  // string - html to insert into control's text node. Empty string for no change                    
  'innerHTML': '',                         
 
  // string - a class name to toggle if using the toggleClass effect
  'toggleClass': '',   
 
  // object - arguments passed to the effect function
  'eventArgs': {        
 
    // int|string - duration of animation in miliseconds or keywords 'fast','slow',etc. 
    // Note that the default 'toggle' effect will always have 0 duration
    'duration': 'fast',         
 
    // easing function
    'easing':'linear',          
 
    // string|function - the function to call when animation is complete
    'callback': null 
 
  }
  
});

预览截图

切换元素 可见性或CSS类 jQuery qToggle