Как скрыть "все" секции в изотопе - PullRequest
Новая
       49

Как скрыть "все" секции в изотопе

1 голос
/ 18 июня 2020

У меня проблема с этим изотопом, я хочу, чтобы при запуске веб-сайта отображался только ТЕКСТ 1, а не все, как сейчас. Я не знаю, как это сделать, вы можете мне помочь? 

// ISOTOPE FILTER
jQuery(document).ready(function($){

	if ( $('.iso-box-wrapper').length > 0 ) { 

	    var $container 	= $('.iso-box-wrapper'), 
	    	$imgs 		= $('.iso-box img');



	    $container.imagesLoaded(function () {

	    	$container.isotope({
				layoutMode: 'fitRows',
				itemSelector: '.iso-box'
	    	});

	    	$imgs.load(function(){
	    		$container.isotope('reLayout');
	    	})

	    });
        

	    //filter items on button click

	    $('.filter-wrapper li a').click(function(){

	        var $this = $(this), filterValue = $this.attr('data-filter');

			$container.isotope({ 
				filter: filterValue,
				animationOptions: { 
				    duration: 750, 
				    easing: 'linear', 
				    queue: false, 
				}              	 
			});	            

			// don't proceed if already selected 

			if ( $this.hasClass('selected') ) { 
				return false; 
			}

			var filter_wrapper = $this.closest('.filter-wrapper');
			filter_wrapper.find('.selected').removeClass('selected');
			$this.addClass('selected');

	      return false;
	    }); 

	}

});

Вот мой код html

<!-- portfolio section -->
<div id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="title">
                    <h2>Regulations</h2>
                </div>
                <!-- ISO section -->
                <div class="iso-section">
                    <ul class="filter-wrapper clearfix">
                         <li><a href="#" class="opc-main-bg selected" data-filter=".regulation">Regulation</a></li>
                         <li><a href="#" class="opc-main-bg" data-filter=".regulation2">Regulation 2</a></li>
                         <li><a href="#" class="opc-main-bg" data-filter=".regulation3">Regulation 3</a></li>
                    </ul>
                    <div class="iso-box-section">
                        <div class="iso-box-wrapper col4-iso-box">

                             <div class="iso-box regulation">
                                 <h3>
                                     TEXT 1
                                 </h3>
                                 <br>

                            </div>
                            <div class="iso-box regulation2">
                                  <h3>
                                      this is TEXT 2
                                 </h3>  
                                <br>
                            </div>

                             <div class="iso-box regulation3">
                                  <h3>
                                     and there's TEXT 3
                                 </h3>  
                            </div>




                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

Это текущая ситуация. What I have

И это результат, который я хочу What I want

Вот мой код JSfiddle

Этот код не очень хорошо работает на этом веб-сайте, потому что для его работы требуются дополнительные JavaScript.

1 Ответ

0 голосов
/ 18 июня 2020

Обычно вы хотите фильтровать контент при каждой загрузке страницы. Так что просто сделайте это, указав в первый раз, когда вы инициализируете Isotope фильтровать элементы на основе строки.

Один из способов сделать это - жестко закодировать фильтр непосредственно в первый раз, когда вы вызываете Isotope, но я бы рекомендую получить первое значение из доступных фильтров и использовать его. Это позволит вам изменить свой HTML без необходимости изменять свой JavaScript, если вы добавляете или удаляете фильтры. 

// ISOTOPE FILTER
jQuery(document).ready(function($) {

  if ($('.iso-box-wrapper').length > 0) {

    var $container = $('.iso-box-wrapper'),
      $imgs = $('.iso-box img'),
      $filters = $('.filter-wrapper li a');

    $container.imagesLoaded(function() {

      // Get the value of the first filter.
      var initialFilter = $filters.first().attr('data-filter');

      $container.isotope({
        filter: initialFilter,
        layoutMode: 'fitRows',
        itemSelector: '.iso-box',
      });

      $imgs.load(function() {
        $container.isotope('reLayout');
      })

    });


    //filter items on button click
    $filters.click(function() {

      var $this = $(this),
        filterValue = $this.attr('data-filter');

      $container.isotope({
        filter: filterValue,
        animationOptions: {
          duration: 750,
          easing: 'linear',
          queue: false,
        }
      });

      // don't proceed if already selected 

      if ($this.hasClass('selected')) {
        return false;
      }

      var filter_wrapper = $this.closest('.filter-wrapper');
      filter_wrapper.find('.selected').removeClass('selected');
      $this.addClass('selected');

      return false;
    });

  }

});
...