-1

私は学校でのプロジェクトのためにこのアプリを作成しており、jQuery について理解を深めようとしています。ここで非常に良い例を見つけました。スライダーのメニューボタンとして埋め込んで使用しようとしていました。クリックでアニメーションを再生するのに問題があります。

コードを実行すると再生されるように見えますが、その後ではありません。また、いくつかの要素が欠けているようにも見えます。

これが私のコードで、CSSファイルにもリンクされています。

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Volo - X</title>
        <meta name="description" content="Blueprint: Slide and Push Menus" />
        <meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
        <link href="STYLE.css" rel="stylesheet" type="text/css">
        <script src="js/modernizr.custom.js"></script>
        </head>
        <body class="cbp-spmenu-push">
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        <p>
        </p>

<body onclick="myFunction()">        

            <div id="numberOne">                
            <img src="PHOTOS/menu.png"style="height:20px">
            </div>                            

            <div id="marginIncrease">
            <a href="index.html">My Account</a>
                </div>  
            <a href="Post A Job.html">Jobs</a>        
            <a href="Help.html">Help</a>
            <a href="About - X.html"> About - X</a>   
            <div id="Facebook">
            <a href="https://www.facebook.com">
            <img src="PHOTOS/Facebook.png"style="height:40px">
            </a>

  </div>          

<script>
$(document).ready(function () {
var trigger = $('#hamburger'),
isClosed = true;

trigger.click(function () {
  burgerTime();
});

function burgerTime() {
  if (isClosed == true) {
  trigger.removeClass('is-open');
  trigger.addClass('is-closed');
  isClosed = false;
  } else {
  trigger.removeClass('is-closed');
  trigger.addClass('is-open');
  isClosed = true;
  }
}

});
</script>

            <script>
            function myFunction() {
            showLeft.onclick("myfuntion").disabled = true;
            }
            </script>   

                </nav>

                <div class="container">
                <header class="clearfix">
                <p>

                </span>


                <div id="logo"

                <h1><img src="PHOTOS/Volo x.png"style="max-width: 40%"></h1>

                </div>

                <nav>

                </header>
                <div class="main">
                <section>
                    <h2> </h2>

                    <!-- BUTTON GOES IN HERE FOR TOP MENU
                    <button id="showLeft"></button>
                     -->
                    <button id="showLeft"></button>

                        <b>
                        <p style="line-height:2.5">
                        <font size="5" color="#939597">
                        // MY ACCOUNT
                       </p>
                        </font>
                        </b>                                    
                        <p>
                        <font size="3" color="#F7941D">
                        <b>NAME:</b> 
                        </font>
                         Matthew Arnott                       
                        <p>
                        <font size="3" color="#F7941D">
                        <b>ADDRESS: </font>
                        </b> 205 Galloway Street, HAMILTON
                        <p>

                        <font size="3" color="#F7941D">
                        <b>PHONE: </font></b> 021 938 737
                        <p>
                        <font size="3" color="#F7941D">
                        <b>EMAIL: </font></b> mat3tarnott@xtra.co.nz                        <p>
                        <font size="3" color="#F7941D">
                        <b>BALANCE:</b> </font>
                        $109.45
                        <p>
                        <font size="3" color="#F7941D">
                        <b>STATS: </font></b>31 Jobs Completed, 99% Positive Feedback
                        <p>
                        Last Payed at 2:33pm, 14th April 2015
                        <p>
                        <font size="3" color="#F7941D">
                        <b>MESSAGES:</font>
                        <font size="3" color="#000">
                        <a href="OPEN CHAT"> ( 1 )</a>
                        </font>

                        </p>
                        <p style="line-height:2.5">
                        <font size="5" color="#939597">
                        // CURRENT JOBS
                        </font>
                        <p>
                        <font size="3" color="#F7941D">
                        DRIVER LAST UPDATED: </font> 2:00PM, 1/4/15<p>
                        <font size="3" color="#F7941D">
                        <img src="PHOTOS/location.png"style="height:15px">     LOCATION: </font> Hamilton, Waikato<p>
                        <font size="3" color="#F7941D">
                        COST OF JOB:</font> $120
                        <p>
                        <font size="3" color="#F7941D">
                        JOB NUMBER</font>  <a href="JOB INFO"> # 4397</a> 
                        <p>

                        <font size="3" color="#F7941D">
                        <a href="OPEN CHAT">MESSAGE DRIVER</a>

                        </font>
                        </p>

</body>                        

  <div id="hamburger" class="hamburglar is-open">
  <div class="burger-icon">
    <div class="burger-container"> <span class="burger-bun-top"></span> <span class="burger-filling"></span> <span class="burger-bun-bot"></span> </div>
  </div>

  <!-- svg ring containter -->
  <div class="burger-ring"> <svg class="svg-ring">
    <path class="path" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
    </svg> </div>
  <!-- the masked path that animates the fill to the ring --> 

  <svg width="0" height="0">
  <mask id="mask">
    <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" />
  </mask>
  </svg>
  <div class="path-burger">
    <div class="animate-path">
      <div class="path-rotation"></div>
    </div>
  </div>
</div>
</section>
<section class="buttonset">

                </section>
            </div>
        </div>

        <script src="js/classie.js"></script>
        <script>
            var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),

                body = document.body;

            showLeft.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuLeft, 'cbp-spmenu-open' );
                disableOther( 'showLeft' );
            };



            function disableOther( button ) {
                if( button !== 'showLeft' ) {
                    classie.toggle( showLeft, 'disabled' );
                }

            }
        </script>
    <iframe src="https://www.google.com/maps/embed?pb=!1m22!1m12!1m3!1d100916.33952065148!2d175.26492379999996!3d-37.7751415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m7!1i0!3e0!4m0!4m3!3m2!1d-37.792778399999996!2d175.2717903!5e0!3m2!1sen!2snz!4v1429932205297" width="100%" height="300px" frameborder="0" style="border:0"></iframe>

                        <p>
                        <style type="text/css">
                         p { margin-left:1em;}
                        </style>
                        <font size="1" color="#939597">
                        Copyright © 2015 Volo - X, All Rights Reserved
                        </font>
                        <p>

    </body>

</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
4

3 に答える 3

1

HTML の形式が正しくありません。これが問題である可能性があります。2 つの body タグがあり、nav 要素はそのうちの 1 つで始まり、もう 1 つで終わります。私が見ることができる問題は 2 つだけです。ページを基本的な構造に戻し、コードを 1 つずつ元に戻すことをお勧めします。基本的な HTML 形式は

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <!-- scripts and css -->
   </head>
   <body>
     <!-- HTML elements -->
   </body>
</html>

また、スクリプトと css は、保守性を高めるために、インラインではなく、可能な場合は外部の .js および .css ファイルに配置する必要があります。

于 2015-05-01T07:06:14.577 に答える
0

とにかくDOMを操作する前に、基本を理解することをお勧めします。読んでいて吐きそうになりました。

于 2015-05-01T07:51:56.177 に答える