Zurb Foundation 5 offcanvas ไม่ทำงาน

ฉันกำลังพยายามนำ offcanvas ไปใช้กับไซต์โดยใช้เฟรมเวิร์กพื้นฐานของ zurb สำหรับการดูบนมือถือ และเพิ่งคัดลอกโค้ดจากเอกสารประกอบ แต่มันก็ไม่ได้ผล

รหัสมีดังต่อไปนี้:

<script src="/js/vendor/custom.modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

<script>
    $(document).foundation();
</script>
</head>
<body>
<!--offcanvas begin-->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">

            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span>Foundation</span>
                </a>  
            </nav>


            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="/th#">The Psychohistorians</a></li>
                    <li><a href="/th#">The test!</a></li>
                </ul>
            </aside>

            <section class="main-section">
            <!--offcanvas begin-page-content-->

                <!--content-->

            <!--offcanvas end-page-content-->
            </section>

            <a class="exit-off-canvas"></a>

        </div><!--inner-wrap-->
    </div><!-- off-canvas-wrap -->
<!--offcanvas end-->
</body>

ฉันทำอะไรผิดหรือเปล่า?


zurb-foundation
person Iacchus    schedule 26.12.2013    source แหล่งที่มา

คำตอบ (5)


arrow_upward
5
arrow_downward

ในบางกรณีสามารถแก้ไขได้โดยระบุแอตทริบิวต์ข้อมูล HTML data-offcanvas

  <div class="off-canvas-wrap" data-offcanvas>

ดูซอนี้สำหรับการเปลี่ยนแปลงการทำงานของมาร์กอัปของคุณ: http://jsfiddle.net/vooaqtxt/

person Adam Elsodaney    schedule 28.11.2014
comment
หลังจากลองคำตอบอื่น ๆ ทั้งหมดแล้ว นี่คือคำตอบที่ฉันพบว่าสร้างความแตกต่างระหว่าง 5.2.2 และ 5.2.3 - person StandardSpace; 17.12.2014
comment
นี่คือคำตอบที่ถูกต้อง แก้ไขมันสำหรับเวอร์ชัน 5.5.2 - person Murat Karagöz; 21.07.2015

arrow_upward
3
arrow_downward

ฉันได้จำลองปัญหาแล้ว และพบว่าการย้ายทรัพยากร jquery, foundation.min.js และการเรียกการเริ่มต้น:

$(document).foundation();

ก่อนที่แท็กปิด </body> จะแก้ไขปัญหา (ปล่อยให้ modernizr.js อยู่ในหัว)

แก้ไข: ตามที่ @Jigar ชี้ให้เห็นว่า offcanvas.js ไม่จำเป็นต้องโหลดจากภายนอก

ป.ล. ในทุกกรณี วิธีที่ดีที่สุด เพื่อวางการอ้างอิงสคริปต์ทั้งหมดของคุณไว้ที่ส่วนท้ายของหน้า ก่อน </body>

person danwild    schedule 27.12.2013
comment
offcanvas.js รวมอยู่ใน foundation.min.js ดังนั้นจึงไม่จำเป็นต้องโหลดแยกกัน - person Jigar Jain; 27.12.2013
comment
สิ่งนี้ไม่จำเป็นอีกต่อไปสำหรับ Foundation 5.0.3! - person Ribena; 17.01.2014

arrow_upward
2
arrow_downward

น่าเสียดายที่คำตอบของ Ribena ใช้งานไม่ได้อีกต่อไปในเวอร์ชัน 5.2.3 แม้ว่าจะเป็นเวอร์ชัน 5.0.3 ก็ตาม

เพื่อให้ใช้งานได้ในตอนนี้ จะต้องใส่ทริกเกอร์จาวาสคริปต์:

  • หรือที่ท้ายแท็ก <body> ตามที่กล่าวไว้ใน เอกสาร ดังที่ Daniel กล่าว
  • หรือภายใน <head> ด้วยวิธีนี้ (โดยใช้ JQuery):

<script> $(window).bind("load", function () { $(document).foundation(); }); </script>

person Iacchus    schedule 14.06.2014
comment
ขอบคุณแก้ไขปัญหาของฉันแล้ว ‹strong›OR‹/strong› อาจไม่แข็งแกร่งพอ ฉันพยายามหลายครั้งเพื่อย้ายโค้ดไปที่ส่วนหัวของเอกสารในที่สุด ขอบคุณ! - person nycynik; 08.12.2014

arrow_upward
1
arrow_downward

อัปเดตเป็น Foundation 5.0.3 และโค้ดของคุณควรทำงานได้ดีอีกครั้ง

person Ribena    schedule 17.01.2014

arrow_upward
1
arrow_downward

คุณไม่มี href="/th#" บนลิงก์ปุ่มสลับของคุณ

หากไม่มี href="/th#" จะไม่สามารถใช้งานบนอุปกรณ์เคลื่อนที่ได้

นี่คือลักษณะการนำทางของคุณควรมีลักษณะดังนี้:

<nav class="tab-bar show-for-small">
    <a class="left-off-canvas-toggle menu-icon" href="/th#">
        <span>Foundation</span>
    </a>
</nav>
person iamtirado    schedule 27.08.2015