仅展开单击的列

Posted 2023-03-06

技术标签:

【中文标题】仅展开单击的列【英文标题】：Expand only the column which is clicked 【发布时间】：2020-08-26 17:14:16 【问题描述】：

我有以下三列布局，我正在使用引导程序。当我单击一列时，该列旁边的每一列也会展开。出于某种原因，我无法在此处显示 sn-p 代码，因此我附上了我所得到的图像。

如果可能的话，我想改变这种行为。我想单击一列并仅展开该列而不展开其他列。关于如何实现它的任何想法？

$('li.submenu a[href="#"]').click(
  function(e) 
    e.preventDefault();
    $(this).toggleClass('open');
    $(this).next().toggle();
    $('.col-md-4').toggleClass('flex-last');
    return false;
  );

ul.ul_submenu 
  display: none;


.submenu a i 
  transition: ease .3s;


.submenu a.open i 
  transform: rotate(-90deg);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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 #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 #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 #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>
</div>

【问题讨论】：

这把小提琴是你想要的吗？ jsfiddle.net/florentroques/y2f6mjdz/10 您想要的行为会出现在桌面屏幕上？是的，没错！因为在较小的屏幕中，列（每个主要类别）将垂直堆叠，一个在另一个之下。感谢@Florent Roques 的回复。实际上，不，我正在寻找完全不同的东西。出于某种原因，我无法获得 sn-p 代码来显示我所拥有的确切信息。但是要解释一下，我有三列类别，当我单击一列时，该列旁边的每一列也会展开。如果可能的话，我想改变这种行为。我想单击一列并仅展开该列而不是整个水平行。关于如何实现它的任何想法？对不起，我的意思是在上一条消息中说水平行和垂直行。所以我更正了最后一条消息并再次发送。 【参考方案1】：

Bootstrap grid system 是使用Flexbox 构建的（如果您还没有，我建议您阅读它）。当前构建的 html 结构使得每一行都是一个组成部分，由div.row 包裹；您正在构建一个由三列组成的单行行。当这个div.row 中的一个孩子（你的ul submenu）扩展时，它实际上并没有扩展其他孩子，它扩展了包含的div（div.row）。因为包含块扩展，它向下推底部div.row，对此我们真的无能为力。这就是它的工作原理。

因此，如果您想要在问题中指定的行为，您应该考虑这种 HTML 结构：构建三列，每列由 n 行组成。这是一个工作示例（以全页模式运行）。 一个副作用是垂直堆叠的顺序（尽管我认为这不是什么大问题）。

$('li.submenu a[href="#"]').click(
  function(e) 
    e.preventDefault();
    $(this).toggleClass('open');
    $(this).next().toggle();
    $('.col-md-3').toggleClass('flex-last');
    return false;
  );

ul.ul_submenu 
  display: none;


.submenu a i 
  transition: ease .3s;


.submenu a.open i 
  transform: rotate(-90deg);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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="col-md-4">
    <div class="row">
      <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="row">
      <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="row">
      <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>
  <div class="col-md-4">
    <div class="row">
      <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="row">
      <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="row">
      <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>
  <div class="col-md-4">
    <div class="row">
      <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="row">
      <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="row">
      <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>
</div>

【讨论】：

感谢@Richard 的帮助 :)))) @Theopap 很高兴我能帮上忙 ;-)【参考方案2】：

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

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

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

【讨论】：

感谢@Divyansh Singh 的回复...所以基本上你的建议是：

let elementOne = $( 'li.submenu a[href="#"]')[0];     $( elementOne).click(         function(e)              e.preventDefault();             $(this).toggleClass('open');             $(this).next().toggle();             $('.col-md-3').toggleClass('flex-last');             return false;          );

是的，但更简单直接的方法是将 $( 'li.submenu a[href="#"]') 更改为 $ ('.submenu')[0]. 我正在执行以下操作，当我单击某些内容时，它现在没有展开。控制台中也没有发生错误

let elementOne = $('.submenu')[0];     $(elementOne).click(         function(e)              e.preventDefault();             $(this).toggleClass('open');             $(this).next().toggle();             $('.col-md-3').toggleClass('flex-last');             return false;         );

【参考方案3】：

根据提供的代码我无法确定，但我相信错误在这一行：

$('.col-md-3').toggleClass('flex-last');

这会找到每个类 col-md-3 的元素，并为每个找到的元素切换类 flex-last。（你描述的行为）

您可以将其更改为仅搜索单击元素的父元素：

$(this).parents('.col-md-3').toggleClass('flex-last');

【讨论】：

感谢@de hart 的回复...不幸的是，我遇到了相同的行为，我单击的列旁边的其他列也在扩展。顺便说一句，在检查中，我为我点击的特定列得到了这个class="col-md-3"。您发布的示例中的代码按预期工作。您可以发布您正在使用的代码。这是我使用的初始 html、css 和 jquery 代码。关于 sn-p... 我不知道为什么它没有像我附上的图片那样显示三个不同的 col-md-3 列的网格。我让 sn-p 工作......你只需要进入全页模式，你就会看到我的问题。

以上是关于仅展开单击的列的主要内容，如果未能解决你的问题，请参考以下文章

单击链接（扩展器）后仅执行一次警报

单击jqgrid网格时如何仅突出显示单元格

Datatables Jquery 通过单击 TR 展开/折叠

layui垂直菜单如何单击菜单时，其他已展开的菜单自动折叠？

带有超链接和 1 单击展开/折叠的 Google 组织结构图

快速展开/折叠单元格按钮单击