title: How to let @screen's display style work with jQuery's slideToggle?
body: <p>I use @screen to change display:block or display:none for different screen sizes.
  Everything works just fine until jQuery's slideToggle is called.</p>
  <p>For example, initially the element is displayed. When I zoom in, the element will hide (by using display:none). However, in the zoomed in mode, when I click a button, I will call slideToggle to hide/show the element in the zoomed in state.</p>
  <p>After the element is shown via slideToggle, when I zoom out, everything works fine, the element is still shown in zoomed out state.</p>
  <p>However, after the element is shown and then hidden again using slideToggle (by pressing the button twice), after I zoom out, the element is gone (the @screen's display:block doesn't work) for all major browsers including IE/Firefox/Chrome/Edge/Safari. I have to refresh this page to make it show again.</p>
  <p>Is there a way to reset the display state?</p>
  <p>Thanks.</p>
  <p>The minimal example code:</p>
  <pre><code>&lt;header&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          #test {
              display:block;
          }
          #click{
              display:none;
          }
          @media screen and (max-width:1200px) {
              #test {
                  display:none;
              }
              #click {
                  display:block;
              }
          }
        &lt;/style&gt;
  &lt;/header&gt;
  &lt;body&gt;
      &lt;text id=&quot;test&quot;&gt; show with larger resolution! &lt;/text&gt;
      &lt;text id=&quot;click&quot;&gt;click to toggle&lt;/text&gt;
      &lt;script src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
          $(&quot;#click&quot;).click(function(){
              $(&quot;#test&quot;).slideToggle();
          });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>