Question

JS代码：

function showCaption() {
    var captionVis = $('.grey-box-caption-text').css('display');    
    if(captionVis = "none") {
      $('.grey-box-caption-text').width(0);
      $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
    } else {
      $(this).find('.grey-box-caption-text').animate({'width': '0'},750,
                                                     function(){$(this).hide();});  
    }
};

$('.caption-container').click(function() {
    showCaption();
    return false;   
    }
 );

HTML code：

<div class="one-half column home-three-img">
   <div class="caption-container">
      <div class="grey-box-caption">
      </div>
      <div class="grey-box-caption-text">This is a caption test - Hopefully this works
      </div>
   </div>
   <img src="images/3.jpg">
</div>

这不起作用，我是一个JS菜鸟。请帮忙。

我正试图让标题部分从左向右滑出。当我点击父容器时没有任何反应。我希望当我再次点击时，标题会被拍摄并隐藏起来。

我正确加载了Jquery，并且有一个可用的document.ready函数。

链接到在制品http://clients.pivotdesign.com/dev/annual_report_2014/index.html

Answer 1

一个很大的问题是this的值不会在你的＆＃34; showCaption＆＃34;中设置。功能。在该函数的末尾添加return false;：

function showCaption(){
    var captionVis = $('.grey-box-caption-text').css('display');    
    if (captionVis == "none") {
        $('.grey-box-caption-text').width(0);
        $(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
    }
    else {
        $(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
            $(this).hide();
        }); 
    }
};

然后将处理程序分配更改为：

$('.caption-container').click(showCaption);

另请注意，您在if声明中的测试不正确：使用==或===进行比较。

Answer 2

我稍微修改了Pointy的CodePen，它应该用更少的代码来做同样的事情。

为什么灰色框会增加SO演示中的高度，我不知道。在this CodePen中，它可以解决这个“错误”。

function showCaption() {
  var $graybox = $('.grey-box-caption-text');

  $graybox.animate({
    width: 'toggle',
    opacity: 'toggle'
  }, 'slow');
};

$(function(){
	$("#wrapper").on("click", showCaption);
});

.grey-box-caption {
  min-height: 3em;
  min-width: 20px;
  background-color: #bbb;
  display: inline-block;
}
.grey-box-caption-text {
  display: none;
  padding: 1em;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class=grey-box-caption>
    <div class=grey-box-caption-text>
      Hello World this is some text.
    </div>
  </div>
</div>

JS脚本无法正常工作

2 个答案: