SOURCE

  window.onload=function(){
    let yoyoyo = document.querySelector("#yoyoyo");
    let peripheral = document.querySelector("#peripheral");
    yoyoyo.addEventListener('click', function(event) {
        let H6 = event.target.closest('.section-footer__title');
        let peripheral = H6.querySelector(".peripheral");
        peripheral.setAttribute("style", "display: block");
    })
  }

        <div id="yoyoyo">
            <div class="section-footer__row__col section-footer__menu-block" role="navigation" aria-label="二次ナビゲーション">

	<h6 class="section-footer__title no-wrap">オンラインストア情報
		<!-- 三角形角标 -->
		<!-- <div class="arrow"></div> -->
		<!-- 下拉菜单 -->
        <span class="open1">展開</span>
            <span class="fold1">たたむ</span>
            <div class="peripheral">
            <ul class="section-footer__menu-block__menu"  >
                <li>
                    <a href="/search" class="no-wrap">Search</a>
                </li>
                <li>
                    <a href="/policies/terms-of-service" class="no-wrap">Terms of Service</a>
                </li>
                <li>
                    <a href="/policies/refund-policy" class="no-wrap">Refund policy</a>
                </li>
            </ul>
            </div>
            </h6>
            </div>
            <div class="section-footer__row__col section-footer__menu-block" role="navigation" aria-label="二次ナビゲーション" >
                <h6 class="section-footer__title no-wrap">カテゴリー<!-- 三角形角标 -->
                  <!-- <div class="arrow"></div> -->
                  <!-- 下拉菜单 -->
                  <span class="open1">展開</span>
                  <span class="fold1">たたむ</span>
                  <div class="peripheral">
                    <ul class="section-footer__menu-block__menu"  >
                        <li>
                          <a href="/collections/new-arrivals" class="no-wrap">NEW</a>
                        </li>
                        <li>
                          <a href="/collections/best-seller-aug-6th" class="no-wrap">BEST SELLERS</a>
                        </li>
                        <li>
                          <a href="/collections/sale" class="no-wrap">SALE</a>
                        </li>
                      
                        <li>
                          <a href="/collections/wedding" class="no-wrap">WEDDING</a>
                        </li>
                      
                        <li>
                          <a href="/collections/rings" class="no-wrap">RINGS</a>
                        </li>
                      
                        <li>
                          <a href="/collections/collection" class="no-wrap">COLLECTION</a>
                        </li>
                      
                        <li>
                          <a href="/collections/earrings-1" class="no-wrap">EARRINGS</a>
                        </li>
                      
                        <li>
                          <a href="/collections/necklaces-1" class="no-wrap">NECKLACES</a>
                        </li>
                      
                        <li>
                          <a href="/collections/bracelets-1" class="no-wrap">BRACELETS</a>
                        </li>
                        <li>
                          <a href="/collections/charms" class="no-wrap">CHARMS</a>
                        </li>
                    </ul>
                  </div>
                </h6>
            </div>
        </div>

.open1,.fold1{
  display: none;
}
.open1{
  display: none;
}
@media (max-width: 767px) {
  .peripheral{
   border-top: 1px solid rgb(68, 68, 68);
    margin-top: 5%;
    padding-left: 7%;
    padding-top: 5%;
   display: none;
  }
    /* 展开隐藏按钮 */
    .open1,.fold1{
      position: absolute;
      right: 0;
      top: 0;
    }
    .open1{
      display: block;
    }
    .fold1{
      display: none;
    }
  /* .section-footer__menu-block:hover .peripheral{
    display: block;
    color: #636363;
    font-weight: 600;
  } */
  .section-footer__title{
    position: relative;
  }
  

 }