Question

大家好我正在尝试创建一个手风琴，但我不确定我的html结构是否错误。每当我按下其中一个面板时，我看不到它的内容。我只注意到下一个面板消失了。我做错了什么？

function toggleDetailsPanel(e) {
  e.preventDefault();
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    $(this).next().removeClass("active");
    $(this).slideUp("slow");
    //fixme: hide the panel content
    $(this).next().hide();
  }

  //else it's open so show everything
  else {
    $(this).removeClass("active");
    $(this).next().removeClass("active").slideToggle();
    //fixme: show the panel content
    $(this).next().show();
  }

}

#details-info {
  position: absolute;
  top: 4%;
  left: 0;
  background: grey;
  opacity: 0.4;
  border: 0 solid white;
  /*height should be dynamic based on accordian*/
  width: 100%;
  height: auto;
}

.accordian-btn {
  position: relative;
  text-align: center;
  color: white;
  background-color: #229AFC;
  border: 0 solid white;
  width: 100%;
  height: 75px;
}

.accordian-content {
  display: none;
  padding: 15px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details-info">
  <div class="accordian-btn">Description
    <p class="accordian-content">some random Description stuff up in here....</p>
  </div>
  <div class="accordian-btn">Media
    <p class="accordian-content">some random Media stuff up in here....</p>
  </div>
  <div class="accordian-btn">Venue
    <p class="accordian-content">some random Venue stuff up in here....</p>
  </div>
  <div class="accordian-btn">Main Option
    <p class="accordian-content">some random Main Option stuff up in here....</p>
  </div>
</div>

Answer 1

试试这个。希望它有所帮助。

$(document).ready(function() {
  $(".accordian-btn").click(function() {
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
    } else {
      $(this).siblings('.accordian-btn').removeClass('active');
      $(this).addClass('active');
    }
  });
});

#details-info {
  position: absolute;
  top: 4%;
  left: 0;
  background: grey;
  opacity: 0.4;
  border: 0 solid white;
  /*height should be dynamic based on accordian*/
  width: 100%;
  height: auto;
}

.accordian-btn {
  position: relative;
  text-align: center;
  color: white;
  background-color: #229AFC;
  border: 0 solid white;
  width: 100%;
  height: 75px;
}

.accordian-content {
  display: none;
  padding: 15px;
  background-color: white;
  color: black;
}

.accordian-btn.active .accordian-content {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details-info">
  <div class="accordian-btn">Description
    <p class="accordian-content">some random Description stuff up in here....</p>
  </div>
  <div class="accordian-btn">Media
    <p class="accordian-content">some random Media stuff up in here....</p>
  </div>
  <div class="accordian-btn">Venue
    <p class="accordian-content">some random Venue stuff up in here....</p>
  </div>
  <div class="accordian-btn">Main Option
    <p class="accordian-content">some random Main Option stuff up in here....</p>
  </div>
</div>

Answer 2

尝试这样的事情：

$(document).ready(function() {
    $('#details-info').find('.accordian-btn').on('click', function(){
      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');
    });
  });

#details-info {
  position: absolute;
  top: 4%; left: 0;
  background: grey;
  opacity: 0.4;
  border: 0 solid white;
  /*height should be dynamic based on accordian*/
  width: 100%; height: auto;
}

.accordian-btn {
  cursor: pointer;
  position: relative;
  text-align: center;
  color: white;
  background-color: #229AFC;
  border: 0 solid white;
  width: 100%; height: 75px;
}

.accordian-content {
  display: none;
  padding: 15px;
  background-color: white;
}

.accordion-content.default {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
  </head>

<body>
    <div id="details-info">
      <div class="accordian-btn">Description</div>
      <p class="accordian-content">some random Description stuff up in here....</p>

      <div class="accordian-btn">Media</div>
      <p class="accordian-content">some random Media stuff up in here....</p>

      <div class="accordian-btn">Venue</div>
      <p class="accordian-content">some random Venue stuff up in here....</p>

      <div class="accordian-btn">Main Option</div>
      <p class="accordian-content">some random Main Option stuff up in here....</p>
  </div>
</body>

</html>

这里引用了很多这样的内容：

http://uniondesign.ca/simple-accordion-without-jquery-ui/

jQuery Accordian无法正常工作

2 个答案: