Question

我不能让手风琴靠近。它会在点击时打开，但是当我点击它时它不会关闭。

这是我的代码：

MYPRO.accordion = function () {
 var   $acpanel = $(".accordion > .accordion-content"),
       $acsnav = $(".accordion > .accordion-title > a");      

      $acpanel.hide().first().slideUp("easeOutExpo");
    //  $acsnav.first().addClass("active");
      $acsnav.on('click', function () {
          var $this = $(this).parent().next(".accordion-content");

          if ($this.addClass("active")){
          $acsnav.removeClass("active");
          $acpanel.first($this).slideDown();
        $(this).parent().next().slideDown("easeOutExpo");
          }
          else
          {
               $acpanel.first($this).slideUp();
                 $(this).parent().next().slideUp("easeInExpo");
              //$acsnav.removeClass('active').slideUp("easeInExpo");  
              }
          return false;
    });  }

Answer 1

每次单击时，$this.addClass("active")都会返回一个jQuery对象，因此if将总是评估为true，并向下滑动选项卡，永远不会到达else语句。

尝试类似：

var $acpanel = $(".accordion > .accordion-content"),
    $acsnav = $(".accordion > .accordion-title > a");

$acpanel.slideDown("easeOutExpo");
$acsnav.addClass("active");
$acsnav.on('click', function(e) {

  if ($acsnav.hasClass("active")) {
    $acsnav.removeClass("active");
    $acpanel.show().slideUp("easeInExpo");
  } else {
    $acsnav.addClass("active")
    $acpanel.hide().slideDown("easeOutExpo");
  }
});

这样你首先要检查它是否有效。如果是这样，请向上滑动并删除活动类。如果未激活，请向下滑动并删除活动类。

这是JSFiddle。

修改：更新了代码并添加了JSDFiddle。

打开后无法关闭手风琴切换

1 个答案: