javascript - 为什么我的 jquery 插件在我将它放入 div 容器后停止工作？

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 中时，它就停止运行了。我仍然无法解释为什么会这样。但是，如果我把它放在 wrapper 的外面，它会自动固定在顶部，挡住我的固定标题。我也无法解释。我尝试创建两个不同的包装器，一个用于第一张幻灯片，将 jquery 代码留在该包装器之外，然后另一个包装器将剩余内容放入其中，但 jquery 代码仍然会固定在屏幕顶部并阻止 header 。请注意，它会起作用，但定位完全错误。所以...我的解决方案，虽然可能不是解决问题的正确方法，但是重新创建所有 html 代码。这一次，我一次添加了每张幻灯片 1，并弄乱了定位，最终让整个页面在相对位置时正常运行，除了我的页眉和页脚被修复。现在插件运行得非常好，页面正在形成我想要的样子。所以...我的结论是，虽然我无法解释细节，但在使用jquery插件时，响应js的那部分html代码的定位依赖于定位。显然，对我来说唯一可行的定位是相对的。关于为什么会这样的另一种猜测是因为该插件被设计为一个完整的页面插件，我调整了 html 以使其适合 1903 像素宽 x 600 像素高的容器。希望这会帮助那些在同一问题上苦苦挣扎的人。