Question

这里的第一次海报。我已经组装了一个滚动网站，该网站还有一个滑动面板库。问题出在哪里 - 当用户点击缩略图时，相应的大图像会使用＆＃34; animate＆＃34;命令。用户需要再次单击大图像以返回缩略图视图，以进一步导航。

问题：事实证明这并不是非常直观。人们喜欢点击他们想要点击的位置，而不是按照规定/推荐的顺序。在大图像视图中，即使用户点击了＆＃34; Home＆＃34;或者其他一些部分，在点击时滚动到位，但在大型图库图像后面不可见。

当用户点击底部可见的任何其他菜单部分上的图片或时，我需要找到关闭大图片视图的代码，并滚动到相关的点击部分。所有这些部分都使用＆＃34; goToByScroll＆＃34;脚本。图库的初始缩略图视图也使用＆＃34; goTobyScroll＆＃34;脚本。

Per this response from the help forum on the jquery site，＃image和#wrapper是点击后需要关闭的内容。

感谢阅读和任何帮助。

更新:(对于迟来的更新道歉。作为一个业余编码器，这些东西可能是令人生畏的 - 我依靠其他人实际做任何不仅仅是切割粘贴:-)感谢这两个海报花时间和麻烦。为了通过搜索访问的人的利益，这里是在这种情况下实际工作的代码：

$（＆＃39;＃顶部＆＃39）。住（＆＃39;单击＆＃39;，函数（）{ $ this = $（＆＃39; #wrapper＆gt; img＆＃39;）; $（＆＃39;＃描述＆＃39）空（）隐藏（）;

                $('#thumbsWrapper').css('z-index','100')
                .stop()
                .animate({'height':'100%'},speed,function(){
                    var $theWrapper = $('#wrapper > img');
                    $('#panel').css('height','0px');
                    $theWrapper.css('z-index','0');
                    /* 
                    remove the large image element
                    and the navigation buttons
                     */
                    $this.remove();
                    $('#prev').hide();
                    $('#next').hide();
                });

}）;

还要感谢所有参与运行/审核SO的人。

Answer 1

将此代码放在goToByScroll（）函数

中

$('#wrapper img').trigger('click')

$（'＃wrapper img'）仅显示您是否显示了某些内容。但是在主图像中添加一些类以使其更具体。像

这样的东西

$('#wrapper img.big_preview').trigger('click')

Answer 2

创建处理程序并将其分配给您的图像以及您提及的其他区域。

var isOpen = false;
...

$('container').delegate('.my-image', 'click' function(e)){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
}.delegate('other-area', 'click', function(){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
})

使用布尔值来确定状态是打开还是关闭。如果您愿意，也可以使用类名。在jQuery中，您还可以选择使用toggle（）函数。

如何使用javascript切换滑动面板

}）;

2 个答案: