Jquery-Code funktioniert nicht mit Javascript

Question

Ich möchte den Header Absatz bei einer bestimmten Breite (sagen wir 1024px Breite) verschwinden lassen, wenn die Menüschaltfläche umgeschaltet wird. Sobald ich den Jquery-Code hinzufüge, gibt der Browser einen Fehler zurück (ReferenceError: openSide ist nicht definiert), der nicht existiert, wenn ich den Jquery-Code kommentiere. ich nicht jetzt, wenn Jquery gründlich geschrieben wurde, aber so weit ich gehen kann nicht durch dieses Problem

html:

<div id="header"> 

     <header id="title"> 
      <h1 style="font-size: 70px; font-weight: 600">The Nest</h1> 
      <p style="font-size: 40px">The hostel where your journey should start</p> 

      <button type="button" class="btn btn-lg" id="menu-btn" onclick="openSide()"> 
      <span class="glyphicon glyphicon-list"></span> 
      </button> 

     </header> 

    </div> 

    <div id="sidebar"> 
     <a href="javascript:void(0)" onclick="closeSide()">&times;</a> 
     <a href="#">Accomodations</a> 
     <a href="#">Services</a> 
     <a href="#">Merchandising</a> 
     <a href="#">About us</a> 
    </div> 

Javascript:

function openSide() { 
document.getElementById("sidebar").style.width = "350px"; 
//document.getElementById("header").style.backgroundPosition = "-250px"; 
document.getElementById("title").style.marginRight = "350px"; 
//document.getElementById("header").style.background = "linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5))"; 
} 

function closeSide() { 
document.getElementById("sidebar").style.width = "0"; 
//document.getElementById("header").style.backgroundPosition = "0px"; 
document.getElementById("title").style.marginRight = "0px"; 
} 

var main = function() { 

if (max-width = 1024px) { 
$("#menu-btn").click(function() { 
    $("#title p").hide(); 
}); 
} 

} 

$(document).ready(main); 

thx für Ihre Hilfe

Answer 1

Sie verwenden den Zuweisungsoperator anstelle des Gleichheitsoperators. Der Code sollte sein:

$(document).ready(() => { 
 
    // Your condition here 
 
    if (true) { 
 
    $('#menu-btn').click(function() { 
 
     $('#title').hide(); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="menu-btn">Hide content</button> 
 
<div id="title">foo</div>

Btw, in dem Code, den Sie auf dem Laufenden, die Variable max-width keine gültige Variablenname ist und auch Sie definieren es nicht.