Question

我没有直截了当，非常感谢任何帮助。我在我的网站上使用切换滑块，他们几乎做我想要的。这是：

单击时更改图标（从+到 - ），向下滑动内容容器如果单击另一个切换链接，则关闭打开的容器并将图标更改为+。

我遇到的问题是，如果再次单击其切换链接（而不是单击另一个切换链接），则打开的容器的图标不会更改回+。知道了吗？

请点击面板，你会看到。一切正常，除非你点击你打开的同一个链接，否则关闭它。

这是该功能的代码，现在就是：

 // Toggle Slides
$(function(){ // run after page loads
        //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
        $("p.trigger, h3.trigger").click(function(){
                $("p.trigger, h3.trigger").removeClass("active");
                $('.toggle_container').not($(this).next()).slideUp();
                $(this).addClass("active").next().slideToggle(500);
                return false; //Prevent the browser jump to the link anchor
        });
});

非常感谢任何帮助。

这是其中一个切换容器的HTML

<div class="list">
<p class="trigger">
    <a href="#">All you need is Nextree…</a>
</p>
<div class="toggle_container">
    <div class="block clearfix">
    <p>denn es deckt alle wichtigen Geschäftsprozesse ab. Geniessen Sie die Vorteile der vollständigen Integration, die automatische Verlinkung von zusammenhängenden Informationen, den direkten Zugriff auf Dokumente – jederzeit und überall.
    </p>
    </div>
    <p class="toggle-close">
    <a href="#">Close</a>
    </p>
</div>
</div>

Answer 1

试试这个

        $("p.trigger, h3.trigger").click(function() {
                var $this = $(this);
                var hasActive = $this.hasClass('active');

                $("p.trigger, h3.trigger").removeClass("active");
                $('.toggle_container').not($this.next()).slideUp();
                if( !hasActive ) {
                   $this.addClass("active");
                }
                $this.next().slideToggle(500);
                return false; //Prevent the browser jump to the link anchor
        });

如果当前未激活，则仅添加活动。这是未经测试的代码，只要您了解我要做的事情，如果代码中有错误，您应该在正确的轨道上解决它

切换滑块不会正确更改后退图标

1 个答案: