仅展开单击的列

我有以下三列布局,并且正在使用引导程序。当我单击一列时,该列旁边的每一列也会被扩展。如果可能,我想更改此行为。我想单击一列,然后仅扩展该列,而不扩展整个垂直行。关于如何实现这一点的任何想法?

$( 'li.submenu a[href="#"]').click(function(e) {
  e.preventDefault();
  $(this).next().toggle();
  $(this).find('i').toggleClass(['fa-caret-down', 'fa-caret-left']);
  return false;
});
ul.ul_submenu {
  display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
    <ul>
  <li class="submenu" id="atag"><a href="#">Apparel & Accessories #1 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
    <ul>
  <li class="submenu" id="atag"><a href="#">Apparel & Accessories #2 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
    <ul>
  <li class="submenu" id="atag"><a href="#">Apparel & Accessories #3 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
    <ul>
  <li class="submenu" id="atag"><a href="#">Apparel & Accessories #4 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
    <ul>
  <li class="submenu" id="atag"><a href="#">Apparel & Accessories #5 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
    <ul>
  <li class="submenu" id="atag"><a href="#">Apparel & Accessories #6 <i class="fas fa-caret-down" style="color: grey;"></i></a>
          <ul class="ul_submenu">
            <li class="submenu"><a href="#">Clothing <i class="fas fa-caret-down" style="color: grey;"></i></a>
              <ul class="ul_submenu">
                <li class="submenu"><a href="#">Men <i class="fas fa-caret-down" style="color: grey;"></i></a>
                  <ul class="ul_submenu">
                    <li class="submenu">blabla</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
评论
  • Oo晓oO
    Oo晓oO 回复

    您可以使用索引来指定要使用的元素:

    var elementOne = $(".yourClass")[0];
    

    这将选择该类的第一个元素,对于其他元素,您可以根据需要更改索引!