0

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

我想做的就像一个画廊。首先是拇指，然后是点击拇指下方的大拇指。

问题是分开不同的事件。

  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？

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

默认状态： 默认状态

点击时： 点击状态

4

2 回答 2

0

我不确定你的布局是如何设置的，但为了这篇文章，它应该很重要，因为它是我们正在努力完善的 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>
于 2011-02-16T16:37:56.783 回答
0

我会用伪代码一一回应你的行为。我假设你知道足够的 jquery 直到另行通知:)

没有可见 div 的点击。（向下滑动选定的 div）- 简单，在你的 lis 上放一个类和 id。然后将切换功能绑定到该类：

 $(".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 的函数（具有较大图像的那些）。

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!

希望能指出你正确的方向

于 2011-02-16T16:08:20.123 回答