Question

我目前正在使用Fancybox，并希望使用jQuery UI手风琴添加切换打开或关闭图像下的文本标题的功能。不幸的是，我很难让jQuery UI手风琴工作。我在页面上测试了手风琴（在Fancybox之外）并且它工作正常。

以下是代码：

<script>
$(document).ready(function() {

$("a.fancybox").fancybox({
    'titlePosition' : 'outside',
});

    $( "#accordion" ).accordion({
    collapsible: true
});

});
</script>


<a class="fancybox" rel="group1" href="images/example.jpg" title="<div id='accordion'><h3><a href='#'>Example</a></h3><div><p>text here</p></div></div>" ><img src="images/example.jpg" alt="Portraits"></a>

任何指导都会非常感谢！谢谢。

Answer 1

看看这个小提琴

image with slideToggle description

Answer 2

在不使用任何其他插件的情况下在fancybox内切换标题会不会更容易？

$("a.fancybox").fancybox({
 'titlePosition' : 'over',
 'onComplete' : function() {
  $("#fancybox-wrap").hover(function() {
   $("#fancybox-title").show();
  }, function() {
   $("#fancybox-title").hide();
  }); // hover
 } // onComplete
}); // fancybox

在http://fancybox.net/blog第3号检查演示

您甚至可以添加一些动画来调整onComplete选项，如

'onComplete' : function() {
 $("#fancybox-title").hide();
 $("#fancybox-wrap").hover(function() {
  $("#fancybox-title").stop(true,true).slideDown(200);
 }, function() {
  $("#fancybox-title").stop(true,true).slideUp(200);
 }); // hover
} // onComplete

Fancybox - 集成jQuery Ui手风琴

2 个答案: