Раскрыть категорию меню с товаром на странице

430
01 сентября 2017, 22:56

Добрый день!

Имеется меню вот такой структуры :

.menu_left_catalog { 
  padding: 0; 
} 
 
.dropdown_radio { 
  position: relative; 
} 
 
.dropdown_radio a { 
  text-decoration: none; 
} 
 
.dropdown_radio [data-toggle="dropdown_radio"] { 
  display: block; 
  color: #fff; 
  background: #333; 
  border-bottom: 1px solid #fff; 
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
  padding: 10px; 
  text-transform: uppercase; 
  font-size: 17px; 
} 
 
.dropdown_radio [data-toggle="dropdown_radio"]:hover { 
  background: #242424; 
} 
 
.dropdown_radio [data-toggle="dropdown_radio"]:before { 
  position: absolute; 
  display: block; 
  content: '\25BC'; 
  font-size: 0.7em; 
  color: #fff; 
  top: 13px; 
  right: 10px; 
  -moz-transform: rotate(0deg); 
  -ms-transform: rotate(0deg); 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg); 
  -moz-transition: -moz-transform 0.6s; 
  -o-transition: -o-transform 0.6s; 
  -webkit-transition: -webkit-transform 0.6s; 
  transition: transform 0.6s; 
} 
 
.dropdown_radio>.dropdown-menu-radio { 
  max-height: 0; 
  overflow: hidden; 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  -moz-transform: scaleY(0); 
  -ms-transform: scaleY(0); 
  -webkit-transform: scaleY(0); 
  transform: scaleY(0); 
  -moz-transform-origin: 50% 0%; 
  -ms-transform-origin: 50% 0%; 
  -webkit-transform-origin: 50% 0%; 
  transform-origin: 50% 0%; 
  -moz-transition: max-height 0.6s ease-out; 
  -o-transition: max-height 0.6s ease-out; 
  -webkit-transition: max-height 0.6s ease-out; 
  transition: max-height 0.6s ease-out; 
  animation: hideAnimation 0.4s ease-out; 
  -moz-animation: hideAnimation 0.4s ease-out; 
  -webkit-animation: hideAnimation 0.4s ease-out; 
} 
 
.dropdown_radio>.dropdown-menu-radio li { 
  padding: 0; 
} 
 
.dropdown_radio>.dropdown-menu-radio li a { 
  display: block; 
  color: #242424; 
  background: #ebebeb; 
  text-transform: uppercase; 
  font-weight: 300; 
  padding: 10px 10px; 
  border-bottom: 1px solid #242424; 
} 
 
.dropdown_radio>.dropdown-menu-radio li a:hover { 
  background: #f6f6f6; 
} 
 
.dropdown_radio>input[type="checkbox"] { 
  opacity: 0; 
  display: block; 
  position: absolute; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  cursor: pointer; 
} 
 
.dropdown_radio>input[type="checkbox"]:checked~.dropdown-menu-radio { 
  max-height: 9999px; 
  display: block; 
  -moz-transform: scaleY(1); 
  -ms-transform: scaleY(1); 
  -webkit-transform: scaleY(1); 
  transform: scaleY(1); 
  animation: showAnimation 0.5s ease-in-out; 
  -moz-animation: showAnimation 0.5s ease-in-out; 
  -webkit-animation: showAnimation 0.5s ease-in-out; 
  -moz-transition: max-height 2s ease-in-out; 
  -o-transition: max-height 2s ease-in-out; 
  -webkit-transition: max-height 2s ease-in-out; 
  transition: max-height 2s ease-in-out; 
} 
 
.dropdown_radio>input[type="checkbox"]:checked+a[data-toggle="dropdown_radio"]:before { 
  -moz-transform: rotate(-180deg); 
  -ms-transform: rotate(-180deg); 
  -webkit-transform: rotate(-180deg); 
  transform: rotate(-180deg); 
  -moz-transition: -moz-transform 0.6s; 
  -o-transition: -o-transform 0.6s; 
  -webkit-transition: -webkit-transform 0.6s; 
  transition: transform 0.6s; 
} 
 
@keyframes showAnimation { 
  0% { 
    -moz-transform: scaleY(0.1); 
    -ms-transform: scaleY(0.1); 
    -webkit-transform: scaleY(0.1); 
    transform: scaleY(0.1); 
  } 
  40% { 
    -moz-transform: scaleY(1.04); 
    -ms-transform: scaleY(1.04); 
    -webkit-transform: scaleY(1.04); 
    transform: scaleY(1.04); 
  } 
  60% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.04); 
    -ms-transform: scaleY(1.04); 
    -webkit-transform: scaleY(1.04); 
    transform: scaleY(1.04); 
  } 
  100% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.02); 
    -ms-transform: scaleY(1.02); 
    -webkit-transform: scaleY(1.02); 
    transform: scaleY(1.02); 
  } 
  100% { 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
  } 
} 
 
@-moz-keyframes showAnimation { 
  0% { 
    -moz-transform: scaleY(0.1); 
    -ms-transform: scaleY(0.1); 
    -webkit-transform: scaleY(0.1); 
    transform: scaleY(0.1); 
  } 
  40% { 
    -moz-transform: scaleY(1.04); 
    -ms-transform: scaleY(1.04); 
    -webkit-transform: scaleY(1.04); 
    transform: scaleY(1.04); 
  } 
  60% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.04); 
    -ms-transform: scaleY(1.04); 
    -webkit-transform: scaleY(1.04); 
    transform: scaleY(1.04); 
  } 
  100% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.02); 
    -ms-transform: scaleY(1.02); 
    -webkit-transform: scaleY(1.02); 
    transform: scaleY(1.02); 
  } 
  100% { 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
  } 
} 
 
@-webkit-keyframes showAnimation { 
  0% { 
    -moz-transform: scaleY(0.1); 
    -ms-transform: scaleY(0.1); 
    -webkit-transform: scaleY(0.1); 
    transform: scaleY(0.1); 
  } 
  40% { 
    -moz-transform: scaleY(1.04); 
    -ms-transform: scaleY(1.04); 
    -webkit-transform: scaleY(1.04); 
    transform: scaleY(1.04); 
  } 
  60% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.04); 
    -ms-transform: scaleY(1.04); 
    -webkit-transform: scaleY(1.04); 
    transform: scaleY(1.04); 
  } 
  100% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.02); 
    -ms-transform: scaleY(1.02); 
    -webkit-transform: scaleY(1.02); 
    transform: scaleY(1.02); 
  } 
  100% { 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
  } 
} 
 
@keyframes hideAnimation { 
  0% { 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
  } 
  60% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.02); 
    -ms-transform: scaleY(1.02); 
    -webkit-transform: scaleY(1.02); 
    transform: scaleY(1.02); 
  } 
  100% { 
    -moz-transform: scaleY(0); 
    -ms-transform: scaleY(0); 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
  } 
} 
 
@-moz-keyframes hideAnimation { 
  0% { 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
  } 
  60% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.02); 
    -ms-transform: scaleY(1.02); 
    -webkit-transform: scaleY(1.02); 
    transform: scaleY(1.02); 
  } 
  100% { 
    -moz-transform: scaleY(0); 
    -ms-transform: scaleY(0); 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
  } 
} 
 
@-webkit-keyframes hideAnimation { 
  0% { 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
  } 
  60% { 
    -moz-transform: scaleY(0.98); 
    -ms-transform: scaleY(0.98); 
    -webkit-transform: scaleY(0.98); 
    transform: scaleY(0.98); 
  } 
  80% { 
    -moz-transform: scaleY(1.02); 
    -ms-transform: scaleY(1.02); 
    -webkit-transform: scaleY(1.02); 
    transform: scaleY(1.02); 
  } 
  100% { 
    -moz-transform: scaleY(0); 
    -ms-transform: scaleY(0); 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
  } 
}
<ul class="menu_left_catalog"> 
  <li class="dropdown_radio"> 
    <li class="dropdown_radio"> 
      <input name="menu_tog" type="checkbox"> 
      <a class="menu_left" data-toggle="dropdown_radio">Категория</a> 
      <ul class="dropdown-menu-radio"> 
        <li> 
          <a href="#">Товар</a> 
        </li> 
      </ul> 
    </li> 
    <li class="dropdown_radio"> 
      <input name="menu_tog" type="checkbox"> 
      <a class="menu_left" data-toggle="dropdown_radio">Категория</a> 
      <ul class="dropdown-menu-radio"> 
        <li> 
          <a href="#">Товар</a> 
        </li> 
      </ul> 
    </li> 
</ul>

Необходимо сделать так, чтобы при переходе на страницу товара, разворачивалась (была в развернутом виде) та категория, к которой относиться данный товар

К примеру если мы открываем товар1, то в развернутом виде была бы категория 1, если товар2 принадлежит к другой категории , то соответственно категория 2 и т.д.

Можно ли это как-то реализовать?

Заранее спасибо!

Answer 1
        <ul class="menu_left_catalog">
                <li class="dropdown_radio">
                  <li class="dropdown_radio">
                    <input class="checker" name="menu_tog" type="checkbox"  >
                    <a class="menu_left" data-toggle="dropdown_radio">1 КАТЕГОРИЯ</a>
                    <ul class="dropdown-menu-radio">
                      <li>
                        <a href="#">Товар</a>
                      </li>
                    </ul>
                  </li>
                <li class="dropdown_radio">
                    <input class="checker" name="menu_tog" type="checkbox" >
                    <a class="menu_left" data-toggle="dropdown_radio">2 КАТЕГОРИЯ</a>
                    <ul class="dropdown-menu-radio">
                      <li>
                        <a href="#">Товар</a>
                      </li>
                    </ul>
                </li>
                <li class="dropdown_radio">
                    <input class="checker" name="menu_tog" type="checkbox" >
                    <a class="menu_left" data-toggle="dropdown_radio">3 КАТЕГОРИЯ</a>
                    <ul class="dropdown-menu-radio">
                      <li>
                        <a href="#">Товар</a>
                      </li>
                    </ul>
                </li>
                <li class="dropdown_radio">
                    <input class="checker" name="menu_tog" type="checkbox" >
                    <a class="menu_left" data-toggle="dropdown_radio">4 КАТЕГОРИЯ</a>
                    <ul class="dropdown-menu-radio">
                      <li>
                        <a href="#">Товар</a>
                      </li>
                    </ul>
                </li>
        </ul>
              <script>
                  var menu = document.getElementsByClassName('dropdown_radio') 
                  var check = document.getElementsByClassName('checker')
                  var category = localStorage.getItem("category")
                  var showMenu = function(){
                    for (let i = 0; i<menu.length; ++i) {
                      if (category==menu[i].innerText){
                        //console.log(
                          check[i-1].setAttribute("checked","true")
                          //)
                      }
                    }
                  }()    

                  for (let i = 0; i<menu.length; ++i) {
                      menu[i].onclick=function(){
                      localStorage.setItem("category", menu[i].innerText); 
                      }
                  }

                  </script>
READ ALSO
Загрузка и синхронный старт css анимации
CSS

Загрузка и синхронный старт css анимации

Чтобы избежать асинхрона при старте цельной анимации, я использую метод предзагрузки графония силами jsПосле полной загрузки картинок меняю...

 362
Android Studio не правильно выполняет implements
Java

Android Studio не правильно выполняет implements

Как вы можете видеть в getView int iХотя раньше было int position

 356
Как включить пустые строки в результат String.split?
Java

Как включить пустые строки в результат String.split?

Есть набор строк от внешнего сервиса, вот пример одной из них:

 347
Как правильно проверять wait_timeout?
Java

Как правильно проверять wait_timeout?

Есть базаУ базы переменная 'wait_timeout' установлена на 300 секунд(для debug мода на 60)

 388