【问题标题】:Snap.js right sidebar not showingSnap.js 右侧边栏未显示
【发布时间】:2015-09-29 22:22:43
【问题描述】:

我正在尝试使用 snap.js 创建两个可拖动的侧边栏。 右侧边栏不显示,取而代之的是左侧边栏。

codepen 演示: http://codepen.io/anon/pen/pjREZg

var snapper = new Snap({
     element: document.getElementById('content'),
     hyperextensible: false
});

var addEvent = function addEvent(element, eventName, func) {
    if (element.addEventListener) {
        return element.addEventListener(eventName, func, false);
    } else if (element.attachEvent) {
        return element.attachEvent("on" + eventName, func);
    }
};

addEvent(document.getElementById('open-left'), 'click', function(){
    if( snapper.state().state=="left" ){
       snapper.close('left');
    }else {
        snapper.open('left');
    }
});

$('#open-right').click(function(){
    if( snapper.state().state=="right" ){
       snapper.close('right');
    }else {
        snapper.open('right');
    }
});

/* Prevent Safari opening links when viewing as a Mobile App */
(function (a, b, c) {
    if(c in b && b[c]) {
        var d, e = a.location,
            f = /^(a|html)$/i;
        a.addEventListener("click", function (a) {
            d = a.target;
            while(!f.test(d.nodeName)) d = d.parentNode;
            "href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
        }, !1)
    }
})(document, window.navigator, "standalone");

【问题讨论】:

  • 你想要两个单独的侧边栏吗?

标签: javascript jquery snap.js


【解决方案1】:

您正试图从两个按钮调用一个侧边栏。

您需要创建另一个可以使用右键控制的侧边栏实例,如下所示:

var snapper2 = new Snap({
     element: document.getElementById('content'),
     hyperextensible: false
});

$('#open-right').click(function(){
    if( snapper2.state().state=="right" ){
       snapper2.close('right');
   }else {
       snapper2.open('right');
   }
});

【讨论】:

    【解决方案2】:

    很抱歉,我在发布问题一分钟后解决了这个问题……经过一夜的麻烦。

    刚刚从 .snapjs-right .snap-drawer-right 中删除了一个 display none

    简单到我没注意到

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-01-06
      • 1970-01-01
      • 2012-02-13
      • 1970-01-01
      • 2014-11-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多