手风琴可以显示所有但我只需要在任何时候打开一个

Question

第一件事。圣诞快乐。

我在 http://bootsnipp.com/snippets/4OlpK 使用手风琴脚本，到目前为止还不错。但是，单击手风琴选项时我需要折叠选项。目前，一切都可以开放。我只需要一次打开一个手风琴选项即可。

求助。

Answer 1

像下面那样改变你的 Js 函数就可以了

$(function() {
  $(".expand").on( "click", function() {
  $(".expand").find(">:first-child").text("+");
  $(".detail").css("display","none");
    $(this).next().slideToggle(200);
    $expand = $(this).find(">:first-child");

    if($expand.text() == "+") {
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});

找到这个 fiddle。

Answer 2

将您的 javascript 替换为：

$(function() {
  $(".expand").on( "click", function() {
    if($(this).next().css("display")=="none"){
      $(".expand").next().css("display","none");
      $expandold = $(".expand").find(">:first-child");
      $expandold.text("+");
      $(this).next().slideToggle(200);
      $expand = $(this).find(">:first-child");
      $expand.text("-");
    } 
    else{
      $(".expand").next().css("display","none");
      $expand = $(this).find(">:first-child");
      $expand.text("+");
    }

  });
});

这是一个有效的 codepen

Answer 3

这将是使用 slideUp 方法的解决方案。

$(function() {
  $(".expand").on( "click", function() {
    $('.detail').not($(this).next()).slideUp().prev().find(">:first-child").each(function(){
      $(this).text("+");
    });

    $(this).next().slideToggle(200);
    $expand = $(this).find(">:first-child");

    if($expand.text() == "+") {
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});

手风琴可以显示所有但我只需要在任何时候打开一个

Accordion able to display all but i only need one opened at any one time

javascript

bootstrapping

accordion