Question

我有一支手风琴，我能够在每次点击时打开，但我怎样才能再次关闭它？

HTML：

<ul class="accordion">
<li id="one" class="files">
        <a href="#one">Calendar 1<span>10</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>1</span></a></li>
        </ul>
    </li>
<li id="two" class="mail">
        <a href="#two">Calendar 2<span>20</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>2</span></a></li>
        </ul>
    </li>
<li id="three" class="cloud">
        <a href="#three">Calendar 3<span>30</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>3</span></a></li>
        </ul>
    </li>
<li id="four" class="sign">
        <a href="#four">Calendar 4</a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu</a></li>
        </ul>
    </li>
</ul>

使用Javascript：

$(document).ready(function() {
  // Store variables
  var accordion_head = $('.accordion > li > a'),
      accordion_body = $('.accordion li > .sub-menu');

  // Open the first tab on load
  accordion_head.first().addClass('active').next().slideDown('normal');

  // Click function
  accordion_head.on('click', function(event) {
    // Disable header links
    event.preventDefault();

    // Show and hide the tabs on click
    if ($(this).attr('class') != 'active') {
      $(this).next().stop(true,true).slideToggle('normal');
      $(this).addClass('active');
    }
  });
});

小提琴：http://jsfiddle.net/fuuLh494/

Answer 1

您不需要显式检查活动类出现，然后添加/删除类的决定。您可以使用GroupSchema.pre('remove', function(next) { var group = this; group.model('Assignment').update( { group: group._id }, { $unset: { group: 1 } }, { multi: true }, next); }); ProjectSchema.pre('remove', function (next) { var project = this; project.model('Assignment').update( { projects: project._id }, { $pull: { projects: project._id } }, { multi: true }, next); });：

实现此目的

toggleClass

<强> Working Demo

Answer 2

 <input type="reset" value="Clear all" name="clear_all"/>

请在此处查看更新的小提琴：http://jsfiddle.net/9ev31v6w/

Answer 3

使用教程可以做的最好的事情就是学习，而不是在不阅读代码的情况下复制和粘贴。就这么简单：

http://jsfiddle.net/fuuLh494/1/

我在脚本末尾添加else语句：

      else {
            $(this).next().stop(true,true).slideToggle('normal');
            $(this).removeClass('active');
        }

Answer 4

将addClass的所有实例替换为toggleClass，并删除if class is active的条件。

我们正在尝试使用toggleClass()添加类时删除该类，并且不需要任何if条件块。

accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed

Working JSfiddle

Answer 5

您可以完全删除let yDisplacement: CGFloat = 25.0 UIView.animateWithDuration(0.3, delay: 0.0, options: [.Repeat, .Autoreverse, .CurveEaseInOut], // Swift 2.0, use .Repeat | .Autoreverse | .CurveEaseInOut in Swift 1.2 animations: { UIView.setAnimationRepeatCount(1.5) cellToAnimate?.layer.position.y -= yDisplacement }) { (finished) in UIView.animateWithDuration(0.3, delay: 0.0, options: .CurveEaseInOut, animations: { cellToAnimate?.layer.position.y += yDisplacement }, completion: nil) }，同时使用if和slideToggle：

toggleClass

Updated Fiddle

如何使用JQuery进行切换

5 个答案: