Question

我一直在寻找一个我认为已经存在于其中的代码片段。我找到了许多不同的变化，但没有一个最适合我。我试图修改我发现的jsfiddles并调整其他例子，但无济于事。

由于我之前几乎没有使用javascript和Jquery语言的经验，我希望有人可以提供帮助。

在我当前的项目中，我有一个页面，其中加载了所有内容。目前我有6个div全部隐藏在屏幕右侧。左侧有一个垂直导航菜单。我想要的是当点击指定div的链接时，目标div在屏幕上从右向左滑动并停在导航菜单旁边。

但是，当点击一个新链接时，前一个div的内容会滑出屏幕，允许新选择的div替换它。

希望我已经很好地解释了自己。

我想要滑动的内容div是=

ID = “内容一个”

ID = “内容2”

等等。

任何正确方向的解决方案或指针都会非常有用，非常感谢。

这是我最初想要修改但我没有成功...

$(document).ready(function(){
  $("#navigation li a").on("click", function(e){
    e.preventDefault();`enter code here`
    var hrefval = $(this).attr("href");

    if(hrefval == "#content-one") {
      var distance = $('#container').css('right');

      if(distance == "auto" || distance == "0px") {
        $(this).addClass("open");
        activateSlider();
      } else {
        deactivateSlider();
      }
    }
  }); // end click event handler

 // $("#closebtn").on("click", function(e){
//    e.preventDefault();
//    closeSidepage();
//  }); // end close button event handler

  function activateSlider() {
    $('#container').animate({
      right: '350px'
    }, 400, 'easeOutBack'); 
  }

  function deactivateSlider(){
    $("#navigation li a").removeClass("open");
    $('#container').animate({
      right: '0px'
    }, 400, 'easeOutQuint');  
  }
});

Answer 1

试试这个，

<强> HTML

<div id="panel" class="panel">
         content
</div>
<!-- Trigger -->
<a id="trigger" class="trigger">click here </a>

<强> JS

$(document).ready(function () {

    var settings = {
        objSlideTrigger: '#triggerLink', // link button id
        objSlidePanel: 'your_slide_div' // slide div class or id
    }

    $(settings.objSlideTrigger).bind('click' , function() {
        //If the panel isn't out
        if(!$(settings.objSlidePanel).hasClass('out')) {
            slidePanelOut();
        } else if($(settings.objSlidePanel).hasClass('out')) {
            slidePanelIn();
        } 
    });

    function slidePanelOut() {
        //Animate it to left 
        $(settings.objSlidePanel).animate({
            'right' : '-67%'
        });
        //Add the out class
        $(settings.objSlidePanel).addClass('out');
    }
    function slidePanelIn() {
        //Otherwise, animate it back in
        $(settings.objSlidePanel).animate({
            'right' : '-89%'
        });
        //Remove the out class
        $(settings.objSlidePanel).removeClass('out');
    }

});

<强> CSS

 .panel {
        width:85%;
        padding:2%;
        position:fixed;
        right:-89%;
        top:46px;
        z-index:2;
        background: #2F2F2F ;
        -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        border-radius: 1% 1% 1% 1%;
        border-radius: 5px;
    }
    .trigger {
        width:8%;
        text-align:center;
        color:goldenrod;
        position:absolute;
        top:26px;
        padding:0.5% 0%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        background:#2F2F2F ;
        right:30%;
    }

.panel div class

JS Fiddle

从右边滑动div>离开＆lt;

1 个答案: