Clothing
  • Shirts" />

    Как я могу создать поведение меню, используя невестированную разметку?

    64 просмотра

    1 ответ

    551 Репутация автора

    У меня есть выходной HTML, который должен быть оформлен в виде меню.

    <ul>
      <li>
        <a>All</a>
      </li>
      <li>
        <a>
          <span class="level0">Clothing</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level1 parent_0">Shirts</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_0">Tee</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_0">Polo</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_0">Jersey</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_0">Dress</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level1 parent_0">Hats</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_1">Beanie</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_1">Flexfit</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_1">Snapback</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_1">Strapback</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_1">Visor</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level0">Accessories</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level1 parent_2">Swag</span>
        </a>
      </li>
      <li>
        <a>
          <span class="level2 parent_2">Drink Cozy</span>
        </a>
      </li>
    </ul>
    

    Я не могу изменить разметку, кроме как добавить классы (или идентификаторы) к диапазонам на основе запроса, который я сделал. Теперь каждый диапазон имеет необходимую информацию для нацеливания элементов на основе отношений, но я не могу нацеливать элементы с помощью псевдо-селекторов, таких как: hover, чтобы показать или скрыть элементы из-за «каскадного» принципа css. Это ставит меня в менее знакомую область, которая должна использовать js или jQuery.

    Я создал следующую скрипку с применением классов CSS. Если вы прокрутите до конца CSS, то увидите созданные мной селекторы, чтобы переключать видимость целевых элементов. Примеры, которые я нахожу, не очень актуальны для этого случая.

    Скрипка

    Как я могу переключать видимость дочерних элементов этого html-списка в зависимости от состояния наведения их родителей, используя только классы / идентификаторы?

    Автор: dimmech Источник Размещён: 22.08.2016 08:27

    Ответы (1)


    1 плюс

    2193 Репутация автора

    Хорошо, с учетом требований вы не можете изменить иерархию HTML. Я думаю, что нашел решение для вас. Хотя это безобразно как грех, оно работает. По сути, это работает так: если вы наведете курсор на элемент уровня 2, он найдет элементы следующего уровня 3, пока не достигнет другого элемента уровня 2. Затем он добавит .hoveredкласс к этим элементам. Это не идеальное решение, но я думаю, что оно действительно работает довольно хорошо. Вы можете добавить больше событий мыши, чтобы отшлифовать его, но это поможет вам начать. https://jsfiddle.net/9pvbgy1j/5/

    $('li.first').hover(function(){
    	$(this).siblings('li.second').addClass('hovered');
    }, function(e){
     if(!$(e.relatedTarget).is('span.level0')) {
      $(this).siblings('li.second').removeClass('hovered');
     }
    })
    
    $('li.second').hover(function(){
    	$('li.third').removeClass('hovered');
    	$(this).nextUntil('li.second','li.third').addClass('hovered');
    }, function(e){
     if(!$(e.relatedTarget).is('span.level1')) {
      $(this).siblings('li.third').removeClass('hovered');
     }
    })
    
    $('li.third').hover(function(){
    	$('li.fourth').removeClass('hovered');
    	$(this).nextUntil('li.third').addClass('hovered');
    }, function(e){
     if(!$(e.relatedTarget).is('span.level2')) {
      $(this).siblings('li.fourth').removeClass('hovered');
     }
    })
    .isotope-options {
      border: 1px solid #999;
      border-radius: 5px;
      margin: 0 auto;
      padding: 20px;
      width: 500px;
    }
    
    .isotope-options a,
    .isotope-options a:link,
    .isotope-options a:visited,
    .isotope-options a:hover {
      color: #fff;
      text-decoration: none;
    }
    
    .isotope-options {
    	margin: auto;
    	padding: 10px;
    	text-align: center;
    }
    .isotope-options li {
    	display: inline;
    }
    .isotope-options li.first{
    	background: #1E90FF;
    	border-radius: 5px;
    	display: inline-block;
    	padding: 5px 10px;
    	-moz-transition: background-color .3s;
    	-o-transition: background-color .3s;
    	-webkit-transition: background-color .3s;
    	transition: background-color .3s;
    	margin: 0;
    }
    .isotope-options span {
    	font-size: 15px;
    	font-style: unset;
    	background: #1E90FF;
    	border-radius: 5px;
    	padding: 5px 10px;
    	-moz-transition: background-color .3s;
    	-o-transition: background-color .3s;
    	-webkit-transition: background-color .3s;
    	transition: background-color .3s;
    }
    .isotope-options .level1 {
    	background: #657E97;
    	width: 75%;
    	margin:auto;
    }
    .isotope-options .level2 {
    	background: #1B3855;
    	width: 25%;
    	margin:auto;
    }
    
    .isotope-options span:hover {
      background: #ADD8E6;
      color: #555;
    }
    
    /* Visibility Toggle Classes */
    
    .level0 {
    	display: block;
    }
    .level1.parent_0 {
    	display: block;
    }
    .level2.parent_0 {
    	display: block;
    }
    .level2.parent_1 {
    	display: block;
    }
    .level1.parent_2 {
    	display: block;
    }
    .level2.parent_2 {
    	display: block;
    }
    
    
    li.second {
      display: block;
        height: 0px;
        overflow: hidden;
    }
    
    li.third {
      display: block;
        height: 0px;
            overflow: hidden;
    }
    
    li.fourth {
      display: block;
        height: 0px;
            overflow: hidden;
    }
    
    li.hovered {
      height: 1.75em;
    }
    
    li{
      transition: height .5s ease;
      transition-delay: .2s;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <ul class="isotope-options clearfix" data-filter-group="unnamed_filter">
          <li class="first"><a href="#filter" class="filterbutton" data-filter="">All</a></li>
          <li class="second">
            <a href="#filter" class="filterbutton" data-filter=".clothing">
              <span class="level0">Clothing</span>
            </a>
          </li>
          <li class="third">
            <a href="#filter" class="filterbutton" data-filter=".shirts">
              <span class="level1 parent_0">Shirts</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".tee">
              <span class="level2 parent_0">Tee</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".polo">
              <span class="level2 parent_0">Polo</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".jersey">
              <span class="level2 parent_0">Jersey</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".dress">
              <span class="level2 parent_0">Dress</span>
            </a>
          </li>
          <li class="third">
            <a href="#filter" class="filterbutton" data-filter=".hats">
              <span class="level1 parent_0">Hats</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".visor">
              <span class="level2 parent_1">Beanie</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".strapback">
              <span class="level2 parent_1">Flexfit</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".snapback">
              <span class="level2 parent_1">Snapback</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".flexfit">
              <span class="level2 parent_1">Strapback</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".beanie">
              <span class="level2 parent_1">Visor</span>
            </a>
          </li>
          <li class="second">
            <a href="#filter" class="filterbutton" data-filter=".clothing">
              <span class="level0">Clothing</span>
            </a>
          </li>
          <li class="third">
            <a href="#filter" class="filterbutton" data-filter=".shirts">
              <span class="level1 parent_0">Shirts</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".tee">
              <span class="level2 parent_0">Tee</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".polo">
              <span class="level2 parent_0">Polo</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".jersey">
              <span class="level2 parent_0">Jersey</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".dress">
              <span class="level2 parent_0">Dress</span>
            </a>
          </li>
          <li class="third">
            <a href="#filter" class="filterbutton" data-filter=".hats">
              <span class="level1 parent_0">Hats</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".visor">
              <span class="level2 parent_1">Beanie</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".strapback">
              <span class="level2 parent_1">Flexfit</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".snapback">
              <span class="level2 parent_1">Snapback</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".flexfit">
              <span class="level2 parent_1">Strapback</span>
            </a>
          </li>
          <li class="fourth">
            <a href="#filter" class="filterbutton" data-filter=".beanie">
              <span class="level2 parent_1">Visor</span>
            </a>
          </li>
        </ul>

    Автор: Pat Размещён: 22.08.2016 08:50
    Вопросы из категории :
    32x32