Question

我正在尝试使div（.panel divs）出现或消失，当点击右上方的那个（.accordion divs）时。

我为jQuery代码尝试了几个变量，但没有一个对我有效。

我知道我做错了但找不到什么，所以这就是我到目前为止所做的：

HTML：

<div class="accordion">Section 4</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 5</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 6</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

CSS：

.panel {
    display: block;
}

JS

var acc = document.getElementsByClassName("accordion");
$(".panel").hide();

for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        console.log("test");
        $(this).next(".panel").slideToggle();
    });
}

到目前为止，我可以隐藏.panel div，并且test控制台日志正确打印，但是一旦我点击了对应.accordion div，我得到以下内容错误讯息：

TypeError：$（...）。next（...）。slideToggle不是函数

Answer 1

你不应该混合使用纯JavaScript和jQuery。使用这种方式：

$(".panel").hide();

$(".accordion").click(function () {
  if ($(this).next(".panel").is("visible"))
    $(this).next(".panel").slideToggle();
  else {
    $(".panel:visible").slideUp();
    $(this).next(".panel").slideToggle();
  }
});

<强>段

＆＃13;

$(function() {
  $(".panel").hide();

  $(".accordion").click(function() {
    if ($(this).next(".panel").is("visible"))
      $(this).next(".panel").slideToggle();
    else {
      $(".panel:visible").slideUp();
      $(this).next(".panel").slideToggle();
    }
  });
});

＆＃13;

.panel {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">Section 4</div>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 5</div>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 6</div>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

＆＃13;

你的工作原因是你需要使用闭包。代码中this的上下文在通过for循环运行时会有所不同。

Answer 2

我认为这就是你想要的？每次点击，您首先向上滑动所有.panels，然后向下滑动所点击的面板：

＆＃13;

var acc = document.getElementsByClassName("accordion");
$(".panel").hide();

for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        console.log("test");
        $('.panel').slideUp();
        $(this).next(".panel").slideToggle();
    });
}

＆＃13;

.panel {
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">Section 4</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 5</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 6</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

＆＃13;

jQuery slideToggle（）不起作用？

2 个答案: