-2

これが私が作成したフィドルです。私の質問は、赤、緑、青のdivがクリックされたときです。下にスライドしてその内容を表示する新しいdivが必要です.Javaスクリプトを使用してそれを達成するにはどうすればよいですか.

ここにフィドルがあります

HTML 

<div class="profileimage">
</div>

<div class="about">
</div>

<div class="profile">
</div>

<div class="contact">
</div>

</div>

CSS :

body
{
margin:0;
padding0;
background:#262626;
}

.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto; 
}

.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}

.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}


.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}

.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;

}
4

3 に答える 3

0

これが私があなたのために作ったフィドルです： http://jsfiddle.net/BHMUq/

次の jQuery コードを追加しただけです。

$(".about").click(function() {
    if ($("#contents").is(":visible")) {
    $("#contents").slideUp();
    } else {
        $("#contents").slideDown();
    }
});

また、id のコンテンツを含む div を追加し、次contentsのようにスタイルを設定しました。

#contents {display:none; height:40px;clear:both}

于 2013-11-05T01:32:33.557 に答える
0

これは、あなたが要求したもので動作するフィドルです。

基本的に、必要な JS は次のようなものです。

$(document).ready(function(){
    $('.contact,.profileimage,.about').click(function(){
    $('#hiddenDiv').slideDown();
    });
});

基本的に、JavaScriptが言っていることは次のとおりです。

1) ドキュメントの準備ができたら (Web サイトの読み込みが完了したら)、次の操作を行います。

2) クラス「contact」、「profileimage」、「about」のいずれかをクリックすると、次のアクションが実行されます。

3) id hiddenDiv の要素を選択し、$('#hiddenDiv') 下にスライドします ->$('#hiddenDiv).slideDown()

css に次の行を追加する必要があることに注意してくださいhiddenDiv->display:none

于 2013-11-05T01:33:13.487 に答える