如何使滑动切换'div'独立于另一个？

大家好！

我是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);
    });         
});

我已经更新了小提琴

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);
    });
});

相关内容

最新更新

热门标签：