Question

在移动设备上>隐藏内容并添加显示按钮，单击该按钮可显示内容。在Dekstop>显示内容上，隐藏按钮。

var trickvis = true;
if (trickvis) {
    $('.trick').show(); // Affiche
 } else {
    $('.trick').hide();
   console.log('HIDE THE TRICKS');
 }

function myFunction(x) {

 if (x.matches) { // If media query matches
   var trickvis = false; // Cache les tricks
   $('.bttest').show(); // Ajout du bouton

 } else {
   trickvis = true;
   $('.bttest').hide();
 }
}

$( ".bttest" ).click(function() {
 trickvis = true ;
});
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

Codepen：https://codepen.io/gloreau/pen/XWbKzab

我尝试使用true false选项进行隐藏显示，并在移动停止或单击按钮的情况下修改true false，但这似乎不起作用：（。

<article class="trick">
  loilul
</article>
<article class="trick">
  loilul
</article>
<article class="trick">
  loilul
</article>
<button class="bttest"  type="button">Show </button>

Answer 1

您可以使用CSS媒体查询来执行此操作，而无需任何JS。将'content'类赋予'content'DOM元素，并给'display-button'类赋予display button元素，并使用css visibility属性，如下所示。您可以选择使用display属性，因为它适合您。但是，在显示时，值为block或none，为简单起见，省略了其他值。

.content {
   visibility: hidden;
}
.display-button {
   visibility: visible;
}

@media only screen and (min-width: 768px) {
   .display-button {
      visibility: hidden;
   }
   .content  {
      visibility: visible;
   }
}

更新：

您的代码未按要求运行的原因是因为您仅在显示/隐藏屏幕大小更改时隐藏了“显示按钮”，因此您并未对内容执行任何操作（class =“ trick”）。隐藏/显示内容也取决于屏幕尺寸。

function myFunction(x) {
  
  if (x.matches) { // If media query matches
    var trickvis = false; // Cache les tricks
    $('.trick').hide(); // Ajout du bouton
    $('.bttest').show();
  } 
  else {
    trickvis = true;
    $('.bttest').hide();
    $('.trick').show();
  }
}

$( ".bttest" ).click(function() {
  $('.trick').show(); // Affiche
});

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

/* CSS a retirer */
.trick {
  width:50px;
  height:50px;
  background:red;
  margin:1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="trick">
  loilul
</article>
<article class="trick">
  loilul
</article>
<article class="trick">
  loilul
</article>
<button class="bttest"  type="button">Show </button>

单击或媒体查询时隐藏/显示元素

1 个答案: