在制作带有列表，jquery和大量切换的图库时遇到问题

Question

所以我一直在谷歌搜索，但是还没有为这种布局找到任何好的解决方案。

我想做的就像一个画廊。第一个拇指，然后在点击的拇指下面一个大拇指。

问题是分开不同的事件。

  

  
1. 没有可见div的点击。 （向下滑动所选的div）
  
2. 带有可见div的点击。 （过渡到新的div。隐藏旧的，然后   展示新的一个或者什么）
  
3. 点击已经选中的div。 （向上滑动所选的div）
  

一直在努力寻找不同的解决方案，但要么是出现故障，要么有时候它对点击没有反应。

目前的基本结构：

<ul>
    <li id="case1">Thumb1</li>
    <li id="case2">Thumb2</li>
    <li id="case3">Thumb3</li>
</ul>

<div id="case1box">Content</div>
<div id="case2box">Content</div>
<div id="case3box">Content</div>

然后重复那个片段。任何更好的解决方案，因为它是UL（3xLI）然后DIV，UL（3xLI）然后是DIV？

关于切换以及如何解决的任何想法？

---

默认状态：

---

点击后：

Answer 1

我会逐个回复您的行为并使用伪代码。我会假设你知道足够的jquery，直到另行通知：）

没有可见div的点击。 （向下滑动所选的div） - 很容易，把一个类和id放在你的lis上。然后将toggle函数绑定到该类：

 $(".classofli").toggle(function() {
   //get id of current li using attr('id'), parse the number, something like picture_1 or whatever
   //$("#"+idofdivtoslide).slideToggle();
 })

已经处理了第1项和第3项（点击已经选中的div。（向上滑动所选的div）

第2项： 点击一个可见的div。 （过渡到新的div。隐藏旧的，然后展示新的一个或者什么）

有一个变量可以保存你最后选择的div和一个关闭打开div的函数（具有较大图像的div）。

var lastSelected;

//in your toggle function, check if the id of your current thing was the last you clicked, if yes, just call slideToggle. if no, close all open divs, and call slide toggle on current one.
//don't forget to set the lastSelected variable to the id of the item you clicked!

希望指向正确的方向

Answer 2

我不确定你的布局是如何设置的，但这对于这篇文章来说应该很重要，因为它是我们试图完善的jQuery。我用表快速为你准备好了。

查看实时演示：http://jsfiddle.net/pNaCH/1/

以下是它的概述。关键是为不同的项添加类。

<强> JS

$('.thumb').click(function(){
    var id = $(this).attr('id');
    $('.large:visible').slideUp('fast');
    $('#' + id + 'box').slideDown('fast');
});

<强> HTML

<table>
<tr><td>

    <ul>
        <li id="case1" class="thumb">Thumb1</li>
        <li id="case2" class="thumb">Thumb2</li>
        <li id="case3" class="thumb">Thumb3</li>
    </ul>

</td></tr><tr><td>    

    <div id="case1box" class="large">Content1</div>
    <div id="case2box" class="large">Content2</div>
    <div id="case3box" class="large">Content3</div>

</td></tr><tr><td>

    <ul>
        <li id="case4" class="thumb">Thumb4</li>
        <li id="case5" class="thumb">Thumb5</li>
        <li id="case6" class="thumb">Thumb6</li>
    </ul>

</td></tr><tr><td>    

    <div id="case4box" class="large">Content4</div>
    <div id="case5box" class="large">Content5</div>
    <div id="case6box" class="large">Content6</div>

</td></tr>
</table>