使用ul/li專案時，Accordion功能不作業

我有一個根據，當我把內容放在 "accordion-panel-ihe "部分之間時，作業正常，但當我把串列項放在同一部分時，accordion停止作業，我已經嘗試用串列和嘗試在同一部分使用p標簽，但沒有作業，下面是我的accordion的完整代碼，請檢查...感謝提前

$(function() {  
    $(".accordion-ihe > .accordion-item-ihe.is-active" )。 children(".accordion-panel-ihe"/span>).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: 指標。
  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: 旋轉(-45deg) 。
  transition: transform 0.2s easy-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;
    字體大小: 1.0em;
    line-height: 25px;
    color:#009297;
}

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

uj5u.com熱心網友回復：

問題出在這段代碼上：

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

如果你檢查渲染的html，你可以看到ul被移出p，因為那不是有效的html。

所以使用這個：

<div class="accordion-panel-ihe"/span>>
  <ul>。
    <li>list 1</li> 
    <li>list 2</li>/span>
    <li>list 3</li>/span>
    <li>list 4</li>/span>
  </ul>/span>
</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: 指標。
  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: 旋轉(-45deg) 。
  transition: transform 0.2s easy-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;
  字體大小: 1.0em;
  line-height: 25px;
  color: #009297;
}

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

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

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

標籤：

上一篇：如何根據第一次選擇時選擇的選項來隱藏選擇選項

下一篇：使得洗掉按鈕只在懸停在該行上時出現。使用Bootstrap