Question

我已经制作了一个我打算使用的滑动菜单，但是我遇到的一些问题是，当菜单暴露时，我无法将页面内容移到左侧。该菜单与页面上的内容重叠，使其无法读取，我知道这可能是一个JavaScript问题，但我已经尝试寻找解决方案并且已经缩短了。

的JavaScript

jasmineTest

var slideWidth = $（＆＃39;＃pageslide＆＃39;）。outerWidth（）;

$（＆＃39; .slideIt，＃patslide a.close＆＃39;）。on（＆＃34; click＆＃34;，function（）{ $（＆＃39; .slideIt＆＃39;）toggleClass（＆＃39;有源＆＃39;）;

$(document).ready(function() {

http://jsfiddle.net/ujyj24op/1/

Answer 1

尝试将#text部分添加到幻灯片功能中以显示。然后，它会将内容与侧面内容一起滑动。例如：

 else{                                //else show it
  $('#pageslide, #text').show().animate({
    right: '0'
  }, 400 );
  $('.wrapper, #text').animate({
    marginRight: slideWidth
  }, 400 );
}

然后可以稍微改进一下，但会让你知道如何做到这一点。（单程）你已经有了代码。

Answer 2

遵循代码可能会对您有所帮助。

$(document).ready(function() {

  var slideWidth = $('#pageslide').outerWidth(); //grab width of the sliding menu so that this can be controlled in the css only

  $('.slideIt, #pageslide a.close').on("click", function(){  //click function
    $('.slideIt').toggleClass('active'); //toggle the active close vs open icon
    
    if($('#pageslide').is(':visible')) {  //if visible then hide it 
      $('#pageslide').animate({
        right: '-'+slideWidth
      }, 400, function(){
        $('#pageslide').hide();
      } );
      $('.wrapper, #text').animate({
        marginRight: '0'
      }, 400 );
    } 
    else{                                //else show it
      $('#pageslide').show().animate({
        right: '0'
      }, 400 );
      $('.wrapper, #text').animate({
        marginRight: slideWidth
      }, 400 );
    }
     
  });

});

body{
  background-color:rgb(204,204,204);
}
a{
  display:block;
}
#text{
  position:absolute;
  width:150px;
  top:200px;
  right:100px;
}
.slideItWrapper{
  position:relative;
}
.wrapper{
  position:absolute;
  top:110px;
  right:100px;
}
.menu-item{
  @include transition-property(all);
  @include transition-duration(0.2s);

  display:block;
  width:25px;
  height:1px;
  margin:0 0 7px;
  background:rgba(0,0,0,0.8);
}

#pageslide {
  display:none;
  position:absolute;
  position:fixed;
  top:0;
  overflow:scroll;
  height:100%;
  z-index: 999999;
  width:340px;
 
  background: rgba(255,255,255,0.7);
  right:-340px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="wrapper">
  <a href="#" class="slideIt">
    	<span class="menu-item"></span>
  		<span class="menu-item"></span>
  		<span class="menu-item"></span>
  		</a>
</div>
<aside id="pageslide">
<div id="modal">
  <h3>Menu!</h3>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</div>
</aside>
</div>
<div id="text"><p>hello this is my placeholder text lets see if you move please move beause I will be annoyed if you don't</p></div>

使用菜单移动内容

2 个答案: