Question

所以基本上我使用的是一个名为blueprint split layout的jquery插件。它的代码可以在http://tympanus.net/Blueprints/SplitLayout/index.html找到。我修改了代码以适应我的网站主题并且它工作得很好，直到我把它放在带有一类内容的section容器中。每当它进入这个容器时，它就不再起作用了。但是，如果我将它保留在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高度的容器。希望这会帮助那些在同一问题上挣扎的人。

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

1 个答案: