jQuery sliddown（）滑下其他列的背景颜色

发布于 2025-01-25 23:32:02 字数 1593 浏览 2 评论 0原文

我有3个bootstrap列，所有使用CSS显示的所有P内容：无。我有一个jQuery sliddown功能，目的是在用户在其标题上进行鼠标时仅显示一列。每个列的背景颜色与公共类设置相同的背景颜色。当隐藏P内容时，仅显示该颜色的一小部分。当我在标题上鼠标触发滑动索时，其他列也会扩展 - 它们是空白的，P内容仍然根据需要隐藏，但是背景颜色为所有列而扩展。

*我也尝试在没有引导程序的情况下这样做。

          <div id="firstcol" class="col">
            <h2>&#9660 asdf &#9660</h2>
            <p id="firstcolp" class="mt-3 pDL">
              asdf<br>
              asdf<br>
              asdf<br>
              asdf<br>
              asdf<br>
            </p>
            <script>
              $(document).ready(function() {
                $('#firstcol').mouseover(function(){$("#firstcolp").slideDown()});;
              });
            </script>
          </div>
          <div id="onBoard" class="col">
            <h2>&#9660 asdf &#9660</h2>
            <p id="onBoardp" class="mt-3 pDL">
              asdfasdfasdfasdf
            </p>
          </div>
          <div class="col">
            <h2>&#9660 asdf &#9660</h2>
            <p class="mt-3 pDL">
              asdfasdfasdfasdf
            </p>
          </div>
        </div>

.pDL {
    display: none;
}

原文

I have 3 bootstrap columns with all the p content hidden using CSS display: none. I have a jQuery slidedown function that's intended to just reveal one column when the user mouses over its heading. Each of the columns has the same background color set by a common class. When the p content is hidden, just a small portion of that color is shown. When I mouse over the heading to trigger the slideDown, the other columns expand as well - they are blank, the p content is still hidden as desired, but the background color expands for all the columns.

*I have tried to do this without bootstrap as well.

          <div id="firstcol" class="col">
            <h2>▼ asdf ▼</h2>
            <p id="firstcolp" class="mt-3 pDL">
              asdf<br>
              asdf<br>
              asdf<br>
              asdf<br>
              asdf<br>
            </p>
            <script>
              $(document).ready(function() {
                $('#firstcol').mouseover(function(){$("#firstcolp").slideDown()});;
              });
            </script>
          </div>
          <div id="onBoard" class="col">
            <h2>▼ asdf ▼</h2>
            <p id="onBoardp" class="mt-3 pDL">
              asdfasdfasdfasdf
            </p>
          </div>
          <div class="col">
            <h2>▼ asdf ▼</h2>
            <p class="mt-3 pDL">
              asdfasdfasdfasdf
            </p>
          </div>
        </div>