title: Is it possible css display:block after jquery display:none?
body: <p>Here is in jsFiddle <a href="https://jsfiddle.net/6vzkr4wt/15/" rel="nofollow noreferrer">https://jsfiddle.net/6vzkr4wt/15/</a></p>
  
  <p>All works, if do not use jquery. Make browser screen at least <code>737px</code> and can see <code>&lt;div id="menu"&gt;Menu Menu Menu&lt;/div&gt;</code>. If change browser screen less than <code>737px</code>, then do not see <code>&lt;div id="menu"&gt;Menu Menu Menu&lt;/div&gt;</code>.</p>
  
  <p>But the problem is after following actions:</p>
  
  <p>1) Make browser screen less than <code>737px</code></p>
  
  <p>2) Click on <code>&lt;div id="show_menu"&gt;Show menu&lt;/div&gt;</code>, see <code>&lt;div id="menu"&gt;Menu Menu Menu&lt;/div&gt;</code></p>
  
  <p>3) Click outside <code>&lt;div id="menu"&gt;Menu Menu Menu&lt;/div&gt;</code> and <code>&lt;div id="menu"&gt;Menu Menu Menu&lt;/div&gt;</code> disappears. So far ok.</p>
  
  <p>4) Here is problem. Make browser screen at least <code>737px</code> and do not see <code>&lt;div id="menu"&gt;Menu Menu Menu&lt;/div&gt;</code></p>
  
  <p>As I understand the execution of jquery code prevents it. What solution, please? Only with jquery to detect browser width and to show/hide <code>id="menu"</code>? With CSS not possible?</p>
  
  <p>And below is code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).mouseup(function(e) {
    if (!$('#menu').is(e.target) &amp;&amp; $('#menu').has(e.target).length === 0) {
      $("#menu").css("display", "none");
    }
  });
  $("#show_menu").click(function() {
    $("#menu").css("display", "block");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width: 736px) {
    #menu {
      display: none;
    }
    #show_menu {
      display: block;
    }
  }
  
  @media screen and (min-width: 737px) {
    #menu {
      display: block;
    }
    #show_menu {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="show_menu"&gt;Show menu&lt;/div&gt;
  &lt;div id="menu"&gt;Menu Menu Menu&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for advises. Here <code>https://jsfiddle.net/6vzkr4wt/27/</code> is working as necessary. Will try to implement the same only with css.</p>
  
  <p>And here <a href="https://jsfiddle.net/rauw6zyk/8/" rel="nofollow noreferrer">https://jsfiddle.net/rauw6zyk/8/</a> example how to do it only with css (must use <code>tabindex="1"</code>. May be someone knows better solution.</p>
  
  <pre><code>&lt;span class="span3" tabindex="1"&gt;Hide Me&lt;/span&gt;
  &lt;span class="span2" tabindex="1"&gt;Show Me&lt;/span&gt;
  &lt;p class="alert" &gt;Some alarming information here&lt;/p&gt;
  
  
  body {
    display: block;
  }
  .span3:focus ~ .alert {
    display: none;
  }
  .span2:focus ~ .alert {
    display: block;
  }
  .alert{display:none;}
  </code></pre>