主页 / 问题 / 653865
Accepted
jashka
Asked:2020-04-15 02:29:46 +0000 UTC2020-04-15 02:29:46 +0000 UTC

当菜单点击元素时自动移动元素

  • 772

我已经发布了这个问题。

最初，一切看起来都是这样的。

  • 类别在左侧。
  • 我使用 bootstrap 来做菜，一般在网站上。

你能建议怎么做吗？开启品类时，需要将菜品换档col-md-offset-3。

在此处输入图像描述

例如，是的。如果有更多类别/子类别，则需要进一步抵消左侧的菜肴。我真的不知道该怎么做。你不需要为我做，至少给我一个提示。

在此处输入图像描述

在这里，我有他的成就。 

var blockRect = document.querySelector('.block').getBoundingClientRect();
var foods = document.querySelectorAll('.food');

function toggleSubCategories(_category, init) {

  if (!init) {
    document.querySelectorAll('.subcategory').forEach(function(category) {
      if (category !== _category) {
        category.classList.remove('show');
      }
    });

    _category.classList.toggle('show');
  }

}

function isOpenListStructure() {
  return document.querySelectorAll('.subcategory.show').length === 0 ? false : true;
}

function foodOffset(category, init) {
  var subcategories = document.querySelector('.list-structure > ul');
  var offsetListToFood = subcategories.offsetHeight - blockRect.height;
  toggleSubCategories(category.children[1], init);
  var isOpen = isOpenListStructure();

  if (subcategories.offsetHeight >= blockRect.height) {
    
    foods.forEach(function(food, index) {
      var nextFoodIndex = index;
      var foodRectData = food.getBoundingClientRect();
      
      // detect left foods
      if (foodRectData.left <= blockRect.left) {
        var absoluteFoodHeight = foodRectData.height + foodRectData.top;
        var absoluteListHeight = subcategories.offsetHeight + Math.abs(subcategories.getBoundingClientRect().top);
        
        console.log(food, 'subcategories.offsetHeight ', subcategories.offsetHeight, ' > ', foodRectData.top, ' && ', subcategories.offsetHeight, ' < ', absoluteFoodHeight);
        
        if ( absoluteListHeight >= foodRectData.top && absoluteListHeight <= absoluteFoodHeight ) {
          food.classList.add('col-md-offset-4');
        } else {
          food.classList.remove('col-md-offset-4');
        }

      }

    });
  } else {
    document.querySelectorAll('.food').forEach(function (food) {
      if (food.classList.contains('col-md-offset-4')) {
        food.classList.remove('col-md-offset-4');
      }
    });
  }
}

document.querySelectorAll('.category').forEach(function(category) {
  foodOffset(category, true);
  category.addEventListener('click', function(e) {
    e.preventDefault();
    foodOffset(this, false);
  });
});
.list-structure {
  position: relative;
}

.list-structure li {
  margin-bottom: 4px;
}

.list-structure li a {
  color: #fff;
  font-size: 12px;
  padding: 11px 10px 7px 31px;
  display: block;
}

.list-structure li {
  display: block;
  background: #546a88;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.list-structure > ul {
  position: absolute;
  width: 100% height: 100%;
}

.categories {
  padding: 10px;
}

.subcategory {
  display: none;
}

.block {
  border: 1px solid blue;
  padding: 10px;
  height: 200px;
}

.food {
  padding: 10px;
}

.show {
  display: block;
}

.hide {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3 categories">
    <div class="list-structure">
      <ul>
        <li class="category">
          <a href="#">Маки/Суши</a>
          <ul class=" subcategory">
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
          </ul>
        </li>
        <li class="category">
          <a href="#">Салаты/Супы</a>
          <ul class=" subcategory">
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
          </ul>
        </li>
        <li class="category">
          <a href="#">Салаты/Супы</a>
          <ul class=" subcategory">
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
          </ul>
        </li>
        <li class="category">
          <a href="#">Салаты/Супы</a>
          <ul class=" subcategory">
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
          </ul>
        </li>
        <li class="category">
          <a href="#">Горячие блюда</a>
          <ul class=" subcategory">
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
          </ul>
        </li>
        <li class="category">
          <a href="#">Десерты</a>
          <ul class=" subcategory">
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
          </ul>
        </li>

        <li class="category">
          <a href="#">Напитки</a>
          <ul class=" subcategory">
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
            <li><a href="#">Подкатегория 1</a></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
  <div class="col-md-9 block">
    asdsakjdslkajdklsad
  </div>
</div>
<div class="row">
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  <div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
</div>

代码最好看看是否展开result到全屏。我附上了codepen的链接。

问题是在扩展“Drinks”类别时，第一个块被移动了，这是正确的，但是从左边数的下一个块仍然保留在原位，并且移动了 3 个。

我知道这是由于剪力造成的，但我不知道如何解决。

javascript

1 个回答

  1. Best Answer

    颠倒你的块，最后一切都用简单的 CSS 解决了。

    function toggleSubCategories(_category, init) {
  if (!init) {
    document.querySelectorAll('.subcategory').forEach(function(category) {
      if (category !== _category) {
        category.classList.remove('show');
      }
    });
    _category.classList.toggle('show');
  }
}

document.querySelectorAll('.category').forEach(function(category) {
  toggleSubCategories(category.children[1], true);
  category.addEventListener('click', function(e) {
    toggleSubCategories(category.children[1], false);
    e.preventDefault();
  });
});
    .list-structure,
.block {
  margin-bottom: 12px;
}

.list-structure > ul {
  padding-left: 0;
  margin-bottom: 0;
}

.list-structure li {
  background: #546a88;
  display: block;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.list-structure li:last-child {
  margin-bottom: 0;
}

.list-structure li a {
  color: #fff;
  display: block;
  font-size: 12px;
  padding: 11px 10px 7px 31px;
}

.subcategory {
  display: none;
}

.block {
  border: 1px solid blue;
  padding: 10px;
  height: 257px;
}

.food {
  padding: 10px;
}

.food img {
  width: 100%;
  height: auto;
}

.hide {
  display: none;
}

.show {
  display: block;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="list-structure">
        <ul>
          <li class="category">
            <a href="#">Маки/Суши</a>
            <ul class=" subcategory">
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
            </ul>
          </li>
          <li class="category">
            <a href="#">Салаты/Супы</a>
            <ul class=" subcategory">
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
            </ul>
          </li>
          <li class="category">
            <a href="#">Салаты/Супы</a>
            <ul class=" subcategory">
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
            </ul>
          </li>
          <li class="category">
            <a href="#">Салаты/Супы</a>
            <ul class=" subcategory">
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
            </ul>
          </li>
          <li class="category">
            <a href="#">Горячие блюда</a>
            <ul class=" subcategory">
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
            </ul>
          </li>
          <li class="category">
            <a href="#">Десерты</a>
            <ul class=" subcategory">
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
            </ul>
          </li>

          <li class="category">
            <a href="#">Напитки</a>
            <ul class=" subcategory">
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
              <li><a href="#">Подкатегория 1</a></li>
            </ul>
          </li>

        </ul>
      </div>
    </div>
    <div class="col-md-9">
      <div class="block">
        Site header
      </div>
    </div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
    <div class="col-md-3 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
  </div>
</div>

    或者查看 jsfiddle 中的代码。

    • 1

相关问题