Question

我更新了我的问题！所以，这是小提琴：http://jsfiddle.net/kozola/8M6wS/

我的代码：

<style>
#container {
margin-top: 200px;
position: relative; /* needed for absolutely positioning #a and #c */
padding: 0 10px 0 100px; /* will offset for width of #a and #c; and center #b */
border: gray 1px dotted; /* just for the show */
float: left; /* To dynamicaly change width according to children */
height: 100px;
}

#container div { height: 100px; }

#tab1 {
position: absolute;
top: 0;
width: 100px;
background: gray;
left: 0;
}

#fin {
position: absolute;
top: 0;
width:10px;
background: #eee;
right: 0;
}

#content {
white-space: nowrap;
}

#content div { display: inline-block; }
#content img { height: 100px; }

.description { position: absolute; border: 1px solid red; width: 200px; height: 100px; }
</style>



<div id="container">
<div id="tab1">fixed width content</div>
<div id="content">
    <div><a href="#" id="first"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="first">
        <img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" />    <img src="http://goo.gl/SIiJfX" />
        <div class="description" style="display: block;">this is a description</div>
    </div>
    <div><a href="#" id="second"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="second">
        <img class="second" src="http://goo.gl/SIiJfX" /><img class="second" src="http://goo.gl/SIiJfX" /><img class="second" src="http://goo.gl/SIiJfX" />
        <div class="description" style="display: block;">this is a description</div>        
    </div>
    <div><a href="#" id="third"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="third">
        <img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" />
    </div>
</div>
<div id="fin">fin</div>
</div>


<script>

$(document).ready(function(){
$(".first").hide();
$("#first").show();

$("#first").click(function(){
    $(".first").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

$(document).ready(function(){
$(".second").hide();
$("#second").show();

$("#second").click(function(){
    $(".second").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

$(document).ready(function(){
$(".third").hide();
$("#third").show();

$("#third").click(function(){
    $(".third").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

</script>

我想要完成的是： 1.我一次只需要打开一个标签！所以，如果我打开一个标签，其他人关闭。我知道我可以为每次不打开的每个div写关闭函数，但是我会有~100个div，所以这不起作用。我无法弄清楚为什么中间部分根本不光滑！也许你们有一些想法？

非常感谢你们！

Answer 1

尝试使用此Example

                $(document).ready(function () {

        $(".title").click(function () {

            $(".content").slideUp("fast");

            $(this).find('.expand').removeClass('collapse');
            if ($(this).next().is(":hidden") == true )
            {
                $('.expand').removeClass('collapse');
                $(this).next().slideDown("normal")
                $(this).find('.expand').addClass('collapse');
            }
        }); 
    });

用于图像的水平手风琴+用于打开的按钮EDITED

1 个答案: