Как поместить JavaScript в условие медиа-запроса - PullRequest
Новая
       8

Как поместить JavaScript в условие медиа-запроса

0 голосов
/ 30 мая 2018

Я хотел бы поместить javascript в условие медиа-запроса.Я хочу изменить поведение элементов при изменении размера экрана в мобильном представлении.Это мой код. 

    @media only screen and (max-width: 767px) {
    <script>
    jQuery(document).ready(function(){
    jQuery('.address0.fa-angle-double-down').on('click', function(event) {        
    jQuery("#address-1").toggleClass("expand");
    jQuery('.address0.fa-angle-double-down').toggleClass("less-text");
    });
    });
    </script>
    }

Это HTML 

    <div class="place">
    <h3><a href="/#/"><i class="fa fa-map-marker"></i> Nevada</a><i 
    class="fa fa-angle-double-down address0" aria-hidden="true"></i></h3>
    <ul>
    <li><i class="fa fa-map-marker"></i> <a href="/#/">Las Vegas</a></li>
    </ul>
   </div>

Пожалуйста, помогите большое спасибо.

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Вам нужно проверить функцию jQuery width().Возможно, вам потребуется прослушать событие resize в сочетании с функцией debounce из библиотеки lodash js для обработки случаев, в которых размер окна изменяется. 

    
    function handleClick(e) {
          $("#address-1").toggleClass("expand");
          $('.address0.fa-angle-double-down').toggleClass("less-text");
    }
    
    function handleState() {
    console.log($(document).width());
      if($(document).width() < 767) {
        $('.address0.fa-angle-double-down').on('click', handleClick);
      }
     }
    
    $(document).ready(function(){
      handleState();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="place">
    <h3><a href="/#/"><i class="fa fa-map-marker"></i> Nevada</a><i 
    class="fa fa-angle-double-down address0" aria-hidden="true"> down</i></h3>
    <ul>
    <li><i class="fa fa-map-marker"></i> <a href="/#/">Las Vegas</a></li>
    </ul>
   </div>
0 голосов
/ 30 мая 2018

Вы можете сделать это, но не в CSS.Для этого вам нужно создать MediaQueryList объект.

В вашем случае у вас, вероятно, будет что-то вроде: 

var mql = window.matchMedia("only screen and (max-width: 767px)")

// this is called when the MQL status changed
mql.addListener(doStuff);

// this is called if the MQL already matches the query specificed
if (mql.matches) {
   doStuff();
}

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

Надеюсь, это поможет.

0 голосов
/ 30 мая 2018

сделать это в Jquery if ($(window).width() < 767): 

$('.address0.fa-angle-double-down').on('click', function(event) {
  if ($(window).width() < 767) {
    $("#address-1").toggleClass("expand");
    $('.address0.fa-angle-double-down').toggleClass("less-text");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="place">
  <h3><a href="/#/"><i class="fa fa-map-marker"></i> Nevada</a><i class="fa fa-angle-double-down address0" aria-hidden="true"></i></h3>
  <ul>
    <li><i class="fa fa-map-marker"></i> <a href="/#/">Las Vegas</a></li>
  </ul>
</div>
...