我怎样才能使slidetoggle'div'独立于另一个?

时间:2014-09-29 09:37:25

标签: javascript jquery html slidetoggle

大家好!

我是jquery的初学者。所以我有两个div元素。它们是滑动的。当我打开/关闭一个div时,另一个div也随之移动。是的,我知道,背景中发生了什么,但你有什么想法我怎样才能独立制作它们?谢谢!

<body>
    <div id="m1">
        <div id="ms1">
            st1
            <div class="content">
                <ul>
                    <li>dasd</li>
                    <li>fsfs</li>
                    <li>fsfs</li>
                </ul>
            </div>   
       </div>
    </div>
    <div id="m2">
        <div id="ms2">
            st2
            <div class="content">
                <ul>
                    <li>dasd</li>
                    <li>fsfs</li>
                    <li>fsfs</li>
                </ul>
            </div>
        </div>
</body>

和jquery:

$(document).ready(function() {  
    $("#ms1").click(function(){
        $("#m1 .content").slideToggle(1000);
    });

    $("#ms2").click(function(){
        $("#ms2 .content").slideToggle(1000);
    });         
});

1 个答案:

答案 0 :(得分:-1)

我更新了FIDDLE

http://jsfiddle.net/socemspx/2/

#m1,#m2{ 
    color:white;
    width:200px;
    cursor:pinter;
    padding:5px 1px 1px 1px;
    margin-top:20px;
}
#m1{ 
    background:blue;
}
#m2{ 
    background:green;
}

.content{   
    background:#fff;
    color:#000;
    border:1px solid #000;
}


<div id="m1">
    <div id="ms1">
    st1
        <div class="content">
            <ul>
                <li>dasd</li>
                <li>fsfs</li>
                <li>fsfs</li>
            </ul>
        </div>

    </div>
</div>

<div id="m2">
    <div id="ms2">
    st2
        <div class="content">
            <ul>
                <li>dasd</li>
                <li>fsfs</li>
                <li>fsfs</li>
            </ul>
        </div>
    </div>
</div>


$(document).ready(function () {

    $("#ms1").click(function () {
        $("#m1 .content").slideToggle(1000);
    });

    $("#ms2").click(function () {
        $("#ms2 .content").slideToggle(1000);
    });

});