私のサイド・ナビゲート・コラップは内部では機能しません<form>

Question

私はサイドバーがタグの中に入っている間、これをしばらく修正しようとしていました。

HTML：

<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav"> 
      <br /> 
      <div class="aptest-container aptest-row"> 
       <div class="aptest-col s4"> 
        <img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" /> 
       </div> 
       <div class="aptest-col s8"> 
        <span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />      
     </nav> 
      <div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> 
     <!-- !PAGE CONTENT! --> 
     <div class="aptest-main" style="margin-left:300px;margin-top:43px;"> 
     </div> 

はCSS：

@media screen and (max-width:992px){.aptest-sidenav.aptest-collapse{display:none}.aptest-main{margin-left:0!important;margin-right:0!important}} 
@media screen and (min-width:993px){.aptest-sidenav.aptest-collapse{display:block!important}} 

はJavaScript：

<script type="text/javascript"> 
      $(document).ready(function() { 
       var mySidenav = $("#mySidenav"); 
       var overlayBg = $("#myOverlay"); 
       $("#aptest_open").click(function() { 

        if (mySidenav.style.display === 'block') { 
         mySidenav.style.display = 'none'; 
         overlayBg.style.display = "none"; 
        } else { 
         alert("2"); 
         mySidenav.style.display = 'block'; 
         overlayBg.style.display = "block"; 
        } 
       }); 
       function aptest_close() { 
        alert(); 
        mySidenav.style.display = "none"; 
        overlayBg.style.display = "none"; 
       } 
      }); 

     </script> 

私は私が得るカントの純粋なJS、IVEはjQueryのを使用してみましたが、間違っているかわからないんだけどそれは機能する。上記のJSは実行されません。私は本当に混乱しています。助けてくれてありがとう！

Answer 1

1. id="aptest_open"の要素はありません。アラートコードは、id aptest_openの要素をクリックすることによってのみ動作するコードブロックにあります。

2. jqueryセレクタで要素を選択すると、その要素のスタイルを変更するには、あなたに必要があります。cssスタイルではありません。コードスニペットでは、id aptest_openのボタンを追加し、問題を編集しました。あなたは何を意味

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav">This is my side nav 
 
      <br /> 
 
      <div class="aptest-container aptest-row"> 
 
       <div class="aptest-col s4"> 
 
        <img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" /> 
 
       </div> 
 
       <div class="aptest-col s8"> 
 
        <span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />      
 
     </nav> 
 
      <div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> 
 
     <!-- !PAGE CONTENT! --> 
 
     <div class="aptest-main" style="margin-left:300px;margin-top:43px;"> 
 
     </div> 
 
     
 
     <input type="button" id="aptest_open" value="aptest_open" /> 
 

 

 

 
<script type="text/javascript"> 
 
      $(document).ready(function() { 
 
       var mySidenav = $("#mySidenav"); 
 
       var overlayBg = $("#myOverlay"); 
 
       $("#aptest_open").click(function() { 
 
        if (mySidenav.css('display') === 'block') { 
 
         mySidenav.css('display', 'none'); 
 
         
 
        } else { 
 
         alert("2"); 
 
         mySidenav.css('display', 'block');       
 
        } 
 
       }); 
 
       function aptest_close() { 
 
        alert(); 
 
        mySidenav.style.display = "none"; 
 
        overlayBg.style.display = "none"; 
 
       } 
 
      }); 
 

 
     </script>