javascript - 手风琴功能无法使用 ul/li 项目

Question

我认为当我将内容放在“accordion-panel-ihe”部分之间时工作正常但是当我将列表项放在同一部分然后手风琴停止工作时，我尝试使用列表并尝试在同一部分中使用 p 标签但不工作，下面我的手风琴的完整代码，请检查...谢谢提前

$(function() {  
    $(".accordion-ihe > .accordion-item-ihe.is-active").children(".accordion-panel-ihe").slideDown();
    
    $(".accordion-ihe > .accordion-item-ihe").click(function() {
        $(this).siblings(".accordion-item-ihe").removeClass("is-active").children(".accordion-panel-ihe").slideUp();
        $(this).toggleClass("is-active").children(".accordion-panel-ihe").slideToggle("ease-out");
    });
});

.accordion-ihe {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.accordion-thumb-ihe {
  margin: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  font-weight: normal;
  color:#009297;
}
.accordion-thumb-ihe::before {
  content: "";
  display: inline-block;
  height: 7px;
  width: 7px;
  margin-right: 1rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(-45deg);
  transition: transform 0.2s ease-out;
}

.accordion-panel-ihe {
  margin: 0;
  padding-bottom: 0.8rem;
  display: none;
}

.accordion-item-ihe.is-active .accordion-thumb-ihe::before {
  transform: rotate(45deg);
}

.accordion-panel-ihe li{
    background: url("../images/icon/list-icon.png") no-repeat left 0px top 8px;
    padding-left: 2em;
    font-size: 1.0em;
    line-height: 25px;
    color:#009297;
}

<ul class="accordion-ihe">
    <li class="accordion-item-ihe is-active">
        <p class="accordion-thumb-ihe">Heading</p>
        <p class="accordion-panel-ihe">
            <ul>
                <li>list 1</li>
                <li>list 2</li>
                <li>list 3</li> 
                <li>list 4</li>
            </ul>
        </p>
    </li>
    
    <li class="accordion-item-ihe">
        <p class="accordion-thumb-ihe">Heading</p>
        <p class="accordion-panel-ihe">
            <ul>
                <li>list 1</li>
                <li>list 2</li>
                <li>list 3</li> 
                <li>list 4</li>
            </ul>
        </p>
    </li>
    
    <li class="accordion-item-ihe">
        <p class="accordion-thumb-ihe">Heading</p>
        <p class="accordion-panel-ihe">
            <ul>
                <li>list 1</li>
                <li>list 2</li>
                <li>list 3</li> 
                <li>list 4</li>
            </ul>
        </p>
    </li>
</ul>

标签： javascriptjquerycssaccordion

Answer 1

问题是这段代码：

<p class="accordion-panel-ihe">
  <ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
  </ul>
</p>

如果您检查呈现的 html，您可以看到ul被移出p，因为那不是有效的 html。

所以使用这个：

<div class="accordion-panel-ihe">
  <ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
  </ul>
</div>

你可以在这里阅读更多。

演示

$(function() {
  $(".accordion-ihe > .accordion-item-ihe.is-active").children(".accordion-panel-ihe").slideDown();

  $(".accordion-ihe > .accordion-item-ihe").click(function() {
    $(this).siblings(".accordion-item-ihe").removeClass("is-active").children(".accordion-panel-ihe").slideUp();
    $(this).toggleClass("is-active").find(".accordion-panel-ihe").slideToggle("ease-out");
  });
});

.accordion-ihe {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.accordion-thumb-ihe {
  margin: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  font-weight: normal;
  color: #009297;
}

.accordion-thumb-ihe::before {
  content: "";
  display: inline-block;
  height: 7px;
  width: 7px;
  margin-right: 1rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(-45deg);
  transition: transform 0.2s ease-out;
}

.accordion-panel-ihe {
  margin: 0;
  padding-bottom: 0.8rem;
  display: none;
}

.accordion-item-ihe.is-active .accordion-thumb-ihe::before {
  transform: rotate(45deg);
}

.accordion-panel-ihe li {
  background: url("../images/icon/list-icon.png") no-repeat left 0px top 8px;
  padding-left: 2em;
  font-size: 1.0em;
  line-height: 25px;
  color: #009297;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion-ihe">
  <li class="accordion-item-ihe is-active">
    <p class="accordion-thumb-ihe">Heading</p>
    <div class="accordion-panel-ihe">
      <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
      </ul>
    </div>
  </li>

  <li class="accordion-item-ihe">
    <p class="accordion-thumb-ihe">Heading</p>
    <div class="accordion-panel-ihe">
      <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
      </ul>
    </div>
  </li>

  <li class="accordion-item-ihe">
    <p class="accordion-thumb-ihe">Heading</p>
    <div class="accordion-panel-ihe">
      <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
      </ul>
    </div>
  </li>
</ul>