jQuery jQuery从左侧显示隐藏滑动面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19392453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show hide sliding panel from left side
提问by Paramasivan
I want a panel to slide from left edge of browser when clicking a button and hide the panel when clicking the same button (toggle).
我希望面板在单击按钮时从浏览器的左边缘滑动，并在单击同一按钮（切换）时隐藏面板。
Html
html
<div class="panel">
</div>
<a href="javascript:void(0);" class="slider-arrow show">»</a>
CSS
CSS
.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;
}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}
jquery
查询
$(function(){
$('.slider-arrow.show').click(function(){
$( ".slider-arrow, .panel" ).animate({
left: "+=300"
}, 700, function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
});
$('.slider-arrow.hide').click(function(){
$( ".slider-arrow, .panel" ).animate({
left: "-=300"
}, 700, function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
});
});
It is showing the panel but not hiding the panel. Any problem with the selectors used?
它显示面板但不隐藏面板。使用的选择器有问题吗？
回答by Trevor
As others have said with jQuery once the document is initialized its only looking for elements that initially existed. For that reason your .showfunction was being run every time.
正如其他人对 jQuery 所说的那样，一旦文档被初始化，它只会寻找最初存在的元素。因此，您的.show函数每次都在运行。
Instead of looking for a click event on .slider-arrow.showyou can just look at .slider-arrowand then check for the classes once it has been clicked like in this example.
.slider-arrow.show您可以查看.slider-arrow并检查类，而不是寻找点击事件，一旦它被点击，就像在这个例子中一样。
$(function(){
$('.slider-arrow').click(function(){
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
left: "+=300"
}, 700, function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
else {
$( ".slider-arrow, .panel" ).animate({
left: "-=300"
}, 700, function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
}
});
});
回答by showdev
Since you are using jQuery to manipulate the "show" and "hide" afterthe DOM has loaded, jQuery doesn't know those elements exist.
由于您在 DOM 加载后使用 jQuery 来操作“显示”和“隐藏” ，因此 jQuery 不知道这些元素存在。
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call...
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call...
I suggest using jQuery's on()in order to delegate events and select dynamically generated classes, like so:
我建议使用 jQueryon()来委托事件并选择动态生成的类，如下所示：
$(document).on('click','.slider-arrow.show',function(){
....
});
$(document).on('click','.slider-arrow.hide',function(){
....
});
回答by hyunkeln
I think you can manage the action choosing from the active anchor class like this:
我认为您可以管理从活动锚类中选择的操作，如下所示：
$(function(){
$('.slider-arrow').click(function(){
var anchor = this;
var removeClass = "show";
var addClass = "hide";
var diff = "+=300";
var arrows = "«";
if($(anchor).hasClass("hide")){
diff = "-=300";
removeClass = "hide";
addClass="show";
arrows = '»';
}
$( ".slider-arrow, .panel" ).animate({
left: diff
}, 700, function() {
// Animation complete.
$(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
});
});
});
So you've got only one animation function.
所以你只有一个动画功能。
Here is the updated fiddle: http://jsfiddle.net/eHded/5/
这是更新的小提琴：http: //jsfiddle.net/eHded/5/
回答by StackSlave
You should try using .slideToggle(), put inside a .click(function(){/*in here*/}).
您应该尝试使用.slideToggle()，放入.click(function(){/*in here*/}).
回答by Adam Nicholson
When you write $('.slider-arrow.hide').click(func....., that binds the clickevent at the time that code is first ran (probably when the document is ready). If you change the DOM later on (ie. add the .hideclass) you need to re-bind the clickevent.
当您编写 时$('.slider-arrow.hide').click(func.....，它会click在第一次运行代码时（可能在文档准备好时）绑定事件。如果稍后更改 DOM（即添加.hide类），则需要重新绑定click事件。
You need to use jQuery's .on()method instead (http://api.jquery.com/on/).
您需要改用 jQuery 的.on()方法 ( http://api.jquery.com/on/)。
$(document).on('click', '.slider-arrow.show', function() { /*.......*/ });
$(document).on('click', '.slider-arrow.hide', function() { /*.......*/ });
A better alternative altogether however would be to use CSS3 transitions and jQuery's .toggleClass()
然而，一个更好的选择是使用 CSS3 转换和 jQuery 的 .toggleClass()
.panel {
left: -300px;
transition: left 1s;
/* other styles... */
}
.panel.expand {
left: 0;
}
$('.slider-arrow').click(function() {
$('.panel').toggleClass('expand');
}
回答by hypers
For this task I use SlideRevealjQuery plugin.
对于这个任务，我使用SlideRevealjQuery 插件。
After you include the library the setup is as easy as:
包含库后，设置非常简单：
<div id='slider'>Hello World!!</div>
<button id='trigger'>Trigger</button>
<script>
$('#slider').slideReveal({
trigger: $("#trigger")
});
</script>
Please refer to documentation for more details and live samples.
有关更多详细信息和实时示例，请参阅文档。
