1

div を表示および非表示にするかなり単純な作業スクリプトがあります。

問題は、タグを ID またはクラスに設定できず、現在、必要でない要素セレクターに設定されていることです。この JS 内で変更できるものは、クリックで表示/非表示できるクラスに設定できるようになります。フィドルhttp://jsfiddle.net/dXWAY/2/

$("p").click(function () {
    $("div").slideToggle("slow");
})

p {

    border:0 none;

    font-size:2em;

    background:transparent;

}

div {

    display:none;

    width:400px;

    height:200px;

    background:#f5f5f5;

}

<p>hello</p>
<div class="div">hello</div>
4

4 に答える 4

2

アコーディオンを作ろうとしましたか？

jsフィドル

<div id="portfolio">
    <div class="portfolio-img">
        <a class="toggleBtn">Click Me!</a>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! Sint eum ipsum consequatur!</div>
    </div>
</div>

#portfolio {
    background: none repeat scroll 0 0 #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    float: left;
    width: 200px;
}

#portfolio .portfolio-img {
    width:100%;
    background:#ccc;  
    overflow:hidden;
    float:left;
    clear:left;    
}

.toggleBtn {
    background:deepskyblue;
    display:block;
    float:Left;
    width:100%;
    padding:10px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    color:#fff;
    cursor:pointer;
}

.content {
    background:skyblue; 
    float:left;
    overflow:hidden;
    width:100%;
    padding:10px;
}

$('.content').hide();

$('.toggleBtn').on('click', function() {
    $(this).next('.content').slideToggle();
    return false;
});
于 2013-08-23T21:19:45.837 に答える
1

あなたはそれを意味しますか？

$("#myP").click(function () {
    $("#myDiv").slideToggle("slow");
})

<p id="myP">hello</p>
<div class="myDiv">hello</div>
于 2013-08-23T21:06:48.893 に答える
1

div を .div またはそれ以上に変更し、混乱を減らし、人間が読みやすいようにします。

.hideableDiv {

display:none;

width:400px;

height:200px;

background:#f5f5f5;

}

どこで。これがクラスの名前であることを指定しています。

本質的にあなたの

<div class="div">

CSS の「div」は、これをすべての div 要素に適用することを意味していたため、クラスを適用していません。

変更により、divは次のようになることをお勧めします

<div class="hideableDiv">

これにより、jQueryセレクターが次のようになります。

$(".hideableDiv")
于 2013-08-23T21:07:55.457 に答える
0

これがあなたの望むものかどうかはわかりませんが、フィドルを見ると、css がすべての div を display:none に設定しているため、p を div に入れることはできません。

<div id="portfolio">
    <div class="portfolio-img">

        <div class="div">hello</div>>
    </div>
</div>

<p>hello</p>

ごまかしが述べたように、すべての div 要素ではなく、クラスに display:none を割り当てる方がよいでしょう。

こちらをご覧ください

http://jsfiddle.net/jboneca/dXWAY/4/

于 2013-08-23T21:09:59.903 に答える