0

我试图拥有三个 div，最初都是关闭的。当 div 关闭时，会显示一个向右的跨度，这是一个指向右侧的箭头，当我单击任何 div 时，我希望相应的跨度箭头向下并再次指向那个 div 折叠了它应该指向正确。这是我的小提琴。我想我错过了一些东西，任何人都可以帮我解决这个问题。此外，如果有人可以让知道完成这项任务的更好方法（整个崩溃，扩展），将不胜感激。谢谢

4

3 回答 3

1

这是一个演示

我在一个测试过的项目中使用它:)


但请注意，您只需将图像向下添加并在您的机器上留下URL目录

jsfiddle 演示菜单下拉菜单

我使用了这段JQuery代码CSS，当然还有一些HTML

 $(document).ready(function()
    {
        //slides the element with class "menu_head" when paragraph with class "menu_head" is clicked
        $("#firstpane p.menu_head").click(function()
        {
            $(this).css({backgroundImage:"url(images/menu/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
            $(this).siblings().css({backgroundImage:"url(images/menu/left.png)"});
        });

    });


于 2012-06-06T07:55:23.353 回答
1

您正在使用切换外观的 slideToggle() 但您只分配 $('#sp2').html("▼"); 每次点击，这意味着每当点击 div 时，span 都会得到这个值。您必须检查 div 是否正在展开或折叠，并使用适当的代码来设置跨度。HTML ▶ jQuery

$('#one').click(function() {
        $('.sub1').slideToggle("slow");
        if ($("#sp1").hasClass("expand")) {
            $('#sp1').html("▼").removeClass("expand");
        }
        else {
            $('#sp1').html("▶").addClass("expand");
        }

        $('.sub2').slideUp("slow");
        $('.sub3').slideUp("slow");


    });
于 2012-06-06T07:44:12.540 回答
1

我对您的代码进行了一些修改，包括使用类对元素进行分组。您的代码最初设置为选定的箭头，因此您需要在完成单击的操作之前将所有 div 更改回其默认状态。

尝试这个：

$('.main').click(function() {
    var $el = $(this);

    if (!$el.next(".sub").is(":visible")) {   
        // reset all
        $('.sub').slideUp("slow");
        $('.arrow').html("▶");

        // set current
        $el.next('.sub').slideDown("slow");
        $('.arrow', $el).html("▼");
    }
});

<div class="main">
    <span class="arrow">&#9654;</span>
</div>
<div class="sub">
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
    <p>Here there are many images</p>
</div>

示例小提琴

于 2012-06-06T07:44:39.577 回答