使用 slideToggle 函数的多个元素

Question

这是我正在使用的代码。我知道我是菜鸟，我对javascript/jquery.

一无所知

$(document).ready(function(){
    $(".flip").click(function(){
        $("[class='panel']").slideToggle("slow");
    });
});

.panel, .flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3; 
}

.panel {
    padding: 50px;
    display: none;
 float:left;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div style="float:left">
    <a href="#" class="flip 56">1</a>
    <div class='panel'>Hello world 1!</div>
    <br />

    <div style="display:block; border:1px solid #000">
        Get down
    </div>
    <br />

    <a href="#" class="flip 50">2</a>
    <div class='panel'>Hello world 2!</div>
    <div style="display:block; border:1px solid #000; position:relative">
        Get down again!
    </div>

</div>

http://jsfiddle.net/t930sx4d/

我正在努力让它看起来像下图所示。我试着输入一个唯一的 ID 并使用 "this"。它没有用。提前致谢！

ex

Answer 1

这里。你实际上非常接近。使用 $(this).next() 定位被点击元素旁边的元素。我也做了一些小的调整。面板上的 "float:left" 严重损害了您的布局。 Float 是一个奇怪的属性，它有点肢解元素并且可以弄乱一切。只在必要时使用它。

$(".flip").click(function(){
     $(this).next().slideToggle("slow");
});

.panel, .flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3; 
}

.panel {
    padding: 50px;
    display: none;
}

.hint{
 border : black solid 1px; 
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left">
    <a href="#" class="flip">1</a>
    <div class='panel'>Hello world 1!</div>

    <div class="hint">
        Get down
    </div>
    <br>
    <br>
  
    <a href="#" class="flip 50">2</a>
    <div class='panel'>Hello world 2!</div>
    <div class="hint">
        Get down again!
    </div>

</div>

使用 slideToggle 函数的多个元素

Multiple elements using a slideToggle function

jquery

slidetoggle