Question

我的网站有问题，我想完全像这个例子一样切换：

http://www.templatemonster.com/demo/36298.html

我有顶栏（宽50px）包括箭头切换，在页面的其余部分我有网站的iframe。

我想做的就是切换动画效果 - 将顶部栏从绝对顶部0移动到绝对顶部-50隐藏，同时我想将iframe高度从100％-50px更改为100％。

我做了这个脚本，它可以完美地隐藏顶部栏，但不会再次显示默认值。

http://jsfiddle.net/2WMtX/

你能救我吗？感谢

Answer 1

您是否尝试live而不是click？ live适用于在定义事件侦听器时不存在的元素，我猜你的.show-bar元素在开始时不存在。试试这个：

$('#demo').height($(window).height()-50); // default iframe height

$(".hide-bar").live('click',function(){ // hide top bar
  $("#header-bar").animate({"top":"-50px"},300);
  $("#demo").animate({"height":$(window).height()-0},300);
  $(this).removeClass();
  $(this).addClass("show-bar");
});

$(".show-bar").live('click',function(){ // show top bar
  $("#header-bar").animate({"top":"0px"},300);
  $("#demo").animate({"height":$(window).height()-50},300);
  $(this).removeClass();
  $(this).addClass("hide-bar");
});

注意： 这适用于jquery v1.7（在1.9方法live中已删除）
以下是jquery较新版本的相同代码：

    $('#demo').height($(window).height()-50);

    $(document).on('click',".hide-bar",function(){
      $("#header-bar").animate({"top":"-50px"},300);
      $("#demo").animate({"height":$(window).height()},300);
      $(this).removeClass();
      $(this).addClass("show-bar");
    });

    $(document).on('click',".show-bar", function(){
      $("#header-bar").animate({"top":"0px"},300);
      $("#demo").animate({"height":$(window).height()-50},300);
      $(this).removeClass();
      $(this).addClass("hide-bar");
    });

Answer 2

我希望以下解决方案能为您提供帮助。

css代码：

#header-bar {position:fixed; top:0; left:0; width:200px; background-color:grey; height:50px;}
#close-bar { position:absolute; bottom:-20px; background:red; color:white;}

HTML代码：

<section id="header-bar" class="txt-highlight-color bg-color bg-pattern">
  <span id="close-bar" class="hide-bar">close button</span>
</section>

jQuery代码：

var speed = 300;
        $('#close-bar').on('click', function(){

            var $$ = $(this);

            if( $$.is('.hide-bar') ){
                $('#header-bar').animate({top:-50}, speed);
                $$.removeClass('hide-bar')
            } else {
                $('#header-bar').animate({top:0}, speed);
                $$.addClass('hide-bar')
            }

        });

示例代码：http://jsfiddle.net/Q3yR8/

Answer 3

好的朋友我知道了，这是我的最终代码：

$(function() {
  $('#demo').height($(window).height()-$("#header-bar").height());
  var speed = 300;
  $(document).on('click',".hide-bar",function(){
    $("#header-bar").animate({"top": - $("#header-bar").height()},speed);
    $("#demo").animate({"height":$(window).height()},speed);
    $(this).removeClass();
    $(this).addClass("show-bar");
  });

  $(document).on('click',".show-bar", function(){
    $("#header-bar").animate({"top":"0px"},speed);
    $("#demo").animate({"height":$(window).height()-$("#header-bar").height()},speed);
    $(this).removeClass();
    $(this).addClass("hide-bar");
  });
});

有了这个我只能在CSSfile中设置#header-bar宽度并且它会全部改变

感谢您的帮助

切换标题栏

3 个答案: