Question

我正在尝试使用Jquery onclick事件制作侧边栏，并使用侧边栏切换主体宽度会有所不同。这就是我到目前为止所做的。

$(".for-sidebar").click(function(){
    $(".sidebar-container").css({
    	'right' : '0px',
    	'transition' : 'opacity 1s ease-in-out'
    });
    $(".body-container").css("width","-=300px");
});
$(".sidebar-close").click(function(){
    $(".sidebar-container").css({
    	'right' : '-300px',
    	'transition' : 'opacity 1s ease-in-out'
    });
    $(".body-container").css("width","100%");
});

  html,body{
  	height:100%;
  	width:100%;
  	margin: 0;
  	padding: 0;
  }
  .container{
  	width: 100%;
  }
  .body-container{
  	width: 100%;
  }
  .sidebar-container{
  	width: 300px;
  	position: absolute;
  	top:0;
  	right: -300px;
  	background: #000;
  	color:#fff;
  	height:100%;
  }

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Push Sidebar</title>
</head>

<body>
    
    <div class="container">
    	<div class="body-container">
           <h1>Hello, I am the body</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <button class="for-sidebar">open sidebar</button>
    	</div>
    	<div class="sidebar-container">
              <h1>Hello, I am the sidebar</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            <button class="sidebar-close">close sidebar</button>
    	</div>
    </div>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</body>
</html>

我希望打开侧边栏单击事件仅发生一次，侧边栏切换速度较慢。

Answer 1

使用.animate()对侧边栏进行平滑效果，同时将其拉入和拉出身体。

另外，我建议您在打开侧栏时隐藏按钮open sidebar。因此用户根本没有机会点击它。

这是一个有效的代码。

$(".for-sidebar").click(function(){
    $(".sidebar-container").animate({"right":"0px"}, "slow");
    $(".body-container").css("width","-=300px");
    $(this).hide(); // hide on first click
});
$(".sidebar-close").click(function(){
    $(".sidebar-container").animate({"right":"-300px"}, "slow");
    $(".body-container").css("width","100%");
    $(".for-sidebar").show(); // show when side bar is closed
});

html,body{
  	height:100%;
  	width:100%;
  	margin: 0;
  	padding: 0;
  }
  .container{
  	width: 100%;
  }
  .body-container{
  	width: 100%;
  }
  .sidebar-container{
  	width: 300px;
  	position: absolute;
  	top:0;
  	right: -300px;
  	background: #000;
  	color:#fff;
  	height:100%;
  }

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Push Sidebar</title>
</head>

<body>
    
    <div class="container">
    	<div class="body-container">
           <h1>Hello, I am the body</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <button class="for-sidebar">open sidebar</button>
    	</div>
    	<div class="sidebar-container">
              <h1>Hello, I am the sidebar</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            <button class="sidebar-close">close sidebar</button>
    	</div>
    </div>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</body>
</html>

如何使侧边栏的事务更慢，jquery只点击一次

1 个答案: