Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

http://jsfiddle.net/t930sx4d/

我试图让它看起来如下图所示。我尝试使用一个唯一的ID并使用＆＃34;这个＆＃34;。它没有奏效。提前谢谢！

ex

Answer 1

下面。你实际上非常接近。使用$(this).next()定位所单击元素旁边的元素。我也做了一些小的调整。＆＃34;浮动：左＆＃34;在面板上很多都会伤害你的布局。浮动是一种奇怪的属性，有点可以摧毁元素并且可以搞砸一切。它必须在必要时使用。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用slideToggle函数的多个元素

1 个答案: