Question

我想修改点击事件的this代码。但我无法这样做。我的要求是在点击时滑动面板（不悬停）并在点击时再次回滚（而不是鼠标移出）。

HTML

<div id="sidePanel">
    <div id="panelContent">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>      
    </div>
    <div id="panelHandle"><p>Facebook</p></div>        
</div>

CSS

/* ===== Primary Styles ========================================================
Author: NTechi | WebsTutorial
========================================================================== */
body{
  font-family:Arial;
}

#sidePanel{
  width:245px;
  position:fixed;
  left:-202px;
  top:15%;    
}
#panelHandle{
  background-image: -webkit-linear-gradient(top,#333,#222);
  background-image: -moz-linear-gradient(center top , #333333, #222222);
  background-image: -o-linear-gradient(center top , #333333, #222222);
  background-image: -ms-linear-gradient(center top , #333333, #222222);
  background-image:linear-gradient(center top , #333333, #222222);

  height:150px;
  width:40px;
  border-radius:0 5px 5px 0;
  float:left;
  cursor:pointer;
}
#panelContent{
  float:left;
  border:1px solid #333333;
  width:200px;
  height:300px;
  background-color:#EEEEEE;
}

#panelHandle p {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  left: -4px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 26px;
}

的JavaScript

jQuery(function($) {
  $(document).ready(function() {
    $('#panelHandle').hover(function() {
        $('#sidePanel').stop(true, false).animate({
            'left': '0px'
        }, 900);
    }, function() {
        jQuery.noConflict();
    });

    jQuery('#sidePanel').hover(function() {
        // Do nothing
    }, function() {

        jQuery.noConflict();
        jQuery('#sidePanel').animate({
            left: '-201px'
        }, 800);

    });
  });
});

任何帮助都会非常有帮助。提前谢谢！

Answer 1

使用切换API代替http://api.jquery.com/toggle-event/

$('#panelHandle').toggle(function() {
    $('#sidePanel').stop(true, false).animate({
        'left': '0px'
    }, 900);
}, function() {
      jQuery('#sidePanel').animate({
        left: '-201px'
    }, 800);
});

小提琴：http://jsfiddle.net/GPdFk/4812/

Answer 2

这样做的简单方法。将hover事件更改为toggle事件。使用你的jsfiddle就是这样的：

$(document).ready(function() {
    $('#panelHandle').toggle(function() {
        $('#sidePanel').stop(true, false).animate({
            'left': '0px'
        }, 900);
    }, function() {
        jQuery.noConflict();
        jQuery('#sidePanel').animate({
            left: '-201px'
        }, 800);
    });
});

Answer 3

可以使用.toggle()

轻松完成

以下是更新后的代码：

jQuery(function($) {
    $('#panelHandle').toggle(function() {
        $('#sidePanel').animate({
            'left': '0px'
        }, 900);
    }, function() {
        $('#sidePanel').animate({
            'left': '-202px'
        }, 900);
    });
});

单击时切换Div

3 个答案: