將jquery插件放入div容器后，為什么我的jquery插件停止工作？

Question

因此，基本上我正在使用一個稱為blueprint split layout的jquery插件。 可以在以下位置找到其代碼： http : //tympanus.net/Blueprints/SplitLayout/index.html 。 我修改了代碼以使其適合我的網站主題，並使其完美運行，直到將其放入具有類內容的節容器中為止。 每當它進入該容器時，它就會停止工作。 但是，如果我將它保留在div容器之外，它的功能很漂亮，但是會破壞其余的網站布局。 我已經花了幾天時間尋找解決方案，並且對代碼進行了調整和重建，直到沒有成功為止。 誰能告訴我怎么了？ 另一方面，我確實注意到，在此容器中時，我的某些鏈接也不起作用。 我嘗試將其調整為div容器，部分容器和文章容器，但沒有任何效果。

這是指向我的html的鏈接： http : //codepen.io/luvmeeluvmenot/pen/avzxqZ.html相關代碼為：

<div class="splitcontainer">
        <div id="splitlayout" class="splitlayout">
            <div class="intro" >
                <div class="side side-left">
                    <div class="intro-content">
                        <div class="profile_containerL">
                            <div class="profile"><img src="imgs/profile1.jpg" alt="profile1">
                            </div>
                                <div class="h1s"><span>Andrew Mac Gregor </span>Web Designer
                            </div>
                        </div>
                    </div>
                </div>
                <div class="side side-right">
                    <div class="intro-content">
                        <div class="profile_container">
                            <div class="profile"><img src="imgs/profile2.jpg" alt="profile2"></div>
                            <div class="h1s"><span>Brittney Mac Gregor </span>Web Developer</div>
                        </div>
                    </div>
                </div>
        <Article>
            <div class="page page-right">
                <div class="page-inner">
                    <div class="back_R">
                        <a href="javascript:history.go(0)">
                            <img src="imgs/whiteX.png" alt="BACK" />    
                        </a>
                    </div>
                    <div class="section">
                        <div class="h2s">Web Development</div>
                         <p>...</p>
                    </div>
                </div><!-- /page-inner -->
            </div><!-- /page-right -->
            <div class="page page-left">
                <div class="page-inner">
                    <div class="back_L">
                        <a href="javascript:history.go(0)">
                            <img src="imgs/whiteX.png" alt="BACK" />    
                        </a>
                    </div>
                        <div class="section">
                            <div class="h2s">Web Design</div>
                             <p>...</p>
                        </div>
                </div><!-- /page-inner -->
            </div><!-- /page-left -->
        </div><!-- /intro -->
    </div><!-- /container2 -->
</div><!-- /splitcontainer -->

這是我的CSS之一： http ://codepen.io/luvmeeluvmenot/pen/avzxqZ.css有問題的CSS代碼是：

.side-left,.side-right{color:#fff;background-image:url(../imgs/ABbg.png)}.page,.side{-webkit-backface-visibility:hidden}.splitcontainer{position:inherit;height:600px;margin-left:auto;margin-right:auto;overflow-x:hidden;z-index:2000}.side{position:absolute;top:0;z-index:100;width:50%;height:600px;text-align:center;background-color:#000}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.open-left .side,.open-right .side{cursor:default}.side-left{left:0}.side-right{right:0}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%}.profile img{max-width:100%;border-radius:50%}.intro-content .h1s>span{display:block;white-space:nowrap}.intro-content .h1s>span:first-child{font-weight:300;font-size:2em}.intro-content .h1s>span:nth-child(2){position:absolute;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.8em}.intro-content .h1s>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#000;content:''}.profile_container,.profile_containerL{padding-top:20px;background-color:rgba(0,0,0,.8);border-radius:20px}.profile_container{box-shadow:2px 3px 5px -1px rgba(255,255,255,.8)}.profile_containerL{box-shadow:-2px 3px 5px -1px rgba(255,255,255,.8)}.side-right .intro-content h1>span:nth-child(2):before{background:#000}.back_L{float:left}.back_R{float:right}.back_L img{float:left;width:50px;height:50px}.back_R img{float:right;width:50px;height:50px}.back_L img:hover,.back_R img:hover{opacity:.4}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page-left,.page-right{background:#000;color:#fff}.page{position:absolute;top:0;overflow:auto;min-height:100%;width:75%;height:600px;font-size:1.4em}.page-right{left:25%;outline:#000 solid 5px;-webkit-transform:translateX(100%);transform:translateX(100%)}.splitlayout.open-right{background:#000}.page-left{left:0;outline:#fff solid 5px;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.splitlayout.open-left{background:#fff}.page-inner{padding:2em}.page-inner .section{padding-bottom:1em}.page-inner .h2s{margin:0 0 1em;font-weight:300;font-size:2em;font-family:audiowide}.page-inner p{font-weight:200;font-size:.8em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.intro-content h1,.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:600px}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:absolute;overflow:auto;height:600px}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0) scale(.6);transform:translateY(-50%) translateX(0) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}

可以從上面列出的藍圖站點獲得用於此站點的javascript。javascript文件的兩個名稱是cbpSplitLayout.js和Classie.js，以及站點中包含的modernizer.js文件。

誰能幫我弄清楚為什么將html插件放置在主包裝區后javascript會停止？ 提前致謝。

Answer 1

好幾天了，我想提供我自己的問題答案。 我沒有“確切”的答案，但是，這就是我發現的解決問題的方法。 最初的問題是，每當我將jquery編碼的html放在主包裝div中時，jquery函數便根本無法工作。 基本上，我正在構建一個具有多個幻燈片的視差一頁網站。 標題的第二張幻燈片中插入了jquery插件，假設上面有兩個個人資料圖片。 一方面面向開發人員，另一方面面向設計師。 單擊任一配置文件時，根據哪個配置文件，插件將使頁面幻燈片向左或向右打開。 單擊我放在內部頁面中的“ x”后，頁面刷新並關閉滑動輪廓。

我注意到，將其放置在我其余內容所在的主包裝div內時，它停止工作。 我仍然無法解釋為什么。 但是，如果將其放在包裝紙的外部，它將自動固定在頂部，從而阻塞了固定的頁眉。 我也無法解釋。 我嘗試創建兩個不同的包裝器，一個用於第一張幻燈片，將jQuery代碼從該包裝器中移出，然后另一個包裝器將其余內容放入其中，但仍然將jQuery代碼固定在屏幕頂部並阻止頭。 請注意，它會起作用，但定位完全錯誤。 所以...我的解決方案雖然可能不是解決該問題的正確方法，但卻是重新創建所有html代碼。 這次，我一次添加了每張幻燈片1，並且弄亂了位置，最終使整個頁面在相對位置時都能正常工作，除了我的頁眉和頁腳是固定的。 現在，該插件可以很好地工作，並且頁面正在逐步形成我想要的樣子。 所以...雖然我無法解釋細節，但我的結論是，當使用jquery插件時，響應js的html代碼部分的位置取決於位置。 顯然，對我而言唯一可行的定位是相對的。 關於為什么會這樣的另一個猜測是因為該插件被設計為一個完整的頁面插件，並且我對html進行了調整，以使其適合1903px寬乘600px高的容器。 希望這會幫助那些在同一問題上苦苦掙扎的人。