0

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

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

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

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

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

我想要滑动的内容 div 是 =

id="内容一"

id="内容二"

等等。

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

这是我最初试图修改的，但我没有成功......

$(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');  
  }
});
4

1 回答 1

1

像这样试试

在这里.panel你的滑动div class

JS小提琴

$(document).ready(function() {

  var settings = {
    objSlideTrigger: '#trigger', // link button id
    objSlidePanel: '.panel' // slide div class or id
  }

  $(settings.objSlideTrigger).on('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');
  }

});
.panel {
  width: 85%;
  padding: 2%;
  position: fixed;
  right: -89%;
  top: 46px;
  z-index: 2;
  background: #2F2F2F;
  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;
  background: #2F2F2F;
  right: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panel" class="panel">
  <!-- Trigger -->content
</div>
<a id="trigger" class="trigger">click here</a>

于 2013-10-07T06:46:54.923 回答