Question

我想要有三个div，最初都是关闭的。当div关闭时，显示一个向右侧的跨度，这是一个指向右侧的箭头，当我点击任何div我希望相应的跨度箭头指向当那个div崩溃时，它应该指向右边。这是我的fiddle。我想我错过了什么，任何人都可以帮我解决这个问题。此外，如果任何人可以让我们知道更好的方法来完成这项任务（整个崩溃，扩张），我们将非常感激。感谢

Answer 1

你正在使用slideToggle（）来切换外观，但你只是指定$（'＃sp2'）。html（“▼”）;每次点击意味着只要点击div，跨度就会得到这个值。您必须检查div是否正在展开或折叠，并使用适当的代码来设置范围。 HTML ▶ jQuery的

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

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


    });

Answer 2

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

试试这个：

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

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

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

<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>

Example fiddle

Answer 3

HERE是 DEMO

我在测试的项目中使用它：）

但注意您只需要添加图片，然后在您的计算机上留下网址目录

jsfiddle demo menu dropdown

我使用了这个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)"});
        });

    });

根据div是展开还是折叠来切换span元素的文本

3 个答案: