Question

我正在尝试在课堂上实现slidetoggle。我有很多课但是一样。它会动态，所以类名相同，但会有很多内容。但它不起作用。我只想点击标题，然后标题框将会打开，当我点击关闭时，标题框将会关闭。

<div id="list">
    <ul>
        <li id="arrayorder_42">
            <div class="captionbox">
                <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a>  <a href="#" class="collapsed sbtn_gray">close</a>

            </div>
            <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a>
 <a href="#" class="caption sbtn_gray">caption</a> 
        </li>
        <li id="arrayorder_42">
            <div class="captionbox">
                <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a>  <a href="#" class="collapsed sbtn_gray">close</a>

            </div>
            <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a>  <a href="#" class="caption sbtn_gray">caption</a> 
        </li>
        <li id="arrayorder_42">
            <div class="captionbox">
                <textarea name="" cols="" rows="" placeholder="type your caption"></textarea> <a href="#" class="sbtn_green">save</a>  <a href="#" class="collapsed sbtn_gray">close</a>

            </div>
            <img src="thumbnail/Picture2.jpg" /> <a href="?delete=42" class="sbtn_red">Delete</a>  <a href="#" class="caption sbtn_gray">caption</a> 
        </li>
    </ul>
</div>

我在stackoverlflow中得到了很多答案，我尝试了许多但不是真的有效。可能是我错过了什么。

$(".caption").hover(function(){
    $(this).find('.captionbox').slideToggle();
    });

在我的演示中有很多我评论过的js代码。伙计们可以检查。 http://jsfiddle.net/t2j162bv/1/演示

Answer 1

在您的标记中，captionbox是caption的兄弟，所以

$('.caption').click(function () {
    $(this).siblings('.captionbox').slideToggle();
});

Answer 2

我终于做到了。演示是http://jsfiddle.net/t2j162bv/3/

$('.caption').click(function () {
    $(this).siblings('.captionbox').slideToggle();
});
$(".collapsed").click(function(){
     $(this).parent(".captionbox").slideUp('slow');
});

感谢@arun

slideToggle来自相同的DIV类

2 个答案: