Question

我想在一个页面上添加三个切换功能（所有功能都相同）。

我的JavaScript代码：

<script type="text/javascript">
    $(document).ready( function() {
        $('.toggle_container').hide();
        $('.trigger').click( function() {
            var trig = $(this);
            if ( trig.hasClass('trigger_active') ) {
                trig.next('.toggle_container').slideToggle('slow');
                trig.removeClass('trigger_active');
            } 
            else {
                $('.trigger_active').next('.toggle_container').slideToggle('slow');
                $('.trigger_active').removeClass('trigger_active');
                trig.next('.toggle_container').slideToggle('slow');
                trig.addClass('trigger_active');
            };
            return false;
        });
    });
</script>

这是我的HTML代码：

<div id="tourteaser">
<div id="tourteaser_teaser" class="erster">
    <span class="zahlen">1</span>
    <h3>headline</h3>
    <p>Erstelle deine persönliche Visitenkarte und zeige deine Kunst!</p>
    <a class="trigger" href="" onfocus="this.blur();"></a>
    <div class="toggle_container">
        <div class="trenner"></div>
        <div class="tourinfos"></div>
    </div>
</div>

<div id="tourteaser_teaser" class="mitte">
    <span class="zahlen">2</span>
    <h3>headline</h3>
    <p>Erstelle deine persönliche Visitenkarte und zeige deine Kunst!</p>
    <a class="trigger" href="" onfocus="this.blur();"></a>
    <div class="toggle_container">
        <div class="trenner"></div>
        <div class="tourinfos"></div>
    </div>
</div>

<div id="tourteaser_teaser" class="letzter">    
    <span class="zahlen">3</span>
    <h3>headline</h3>
    <p>Erstelle deine persönliche Visitenkarte und zeige deine Kunst!</p>
    <a class="trigger" href="" onfocus="this.blur();"></a>
    <div class="toggle_container">
        <div class="trenner"></div>
        <div class="tourinfos"></div>
    </div>
</div>

</div>

到目前为止：只有一个（第一个）切换对此功能作出反应。如何让所有三个单独工作？如果在单击另一个切换时关闭一个切换也可以。这很容易吗？

编辑：我上传了一个我网站的例子，因为我无法获得SpYk3HH的例子与我合作。请参阅：http://www.brayaz.de/example/example.html

Answer 1

你有一个设计缺陷，但我得到了以下工作;

的 JS 的

$(function(){ $('.toggle_container').hide(); $('.trigger').on("click", function(e) { $(this).toggleClass("trigger_active").next('.toggle_container').slideToggle('slow'); }); });

HTML更改

<a class="trigger" href="" onfocus="this.blur();"></a>

到

<a class="trigger" href="javascript:void(0);" onfocus="this.blur();"></a>

请参阅

WORKING JSFIDDLE HERE!

<强>更新

实测值的一个主要问题，首先，它不是一个好主意，得到多个元件的ID相同，考虑改变<div id="tourteaser_teaser"为类似<div id="tourteaser_teaser-x"，其中，x是该元素的索引号。其次，我看到你是为了CSS的目的而做的，在这种情况下你要给它们所有相同的CLASS名称，而不是相同的ID。你可以拥有许多类名，但只有一个ID。

我认为我解决了你所有的问题，这就是我所做的：

如前所述，我将<a href=""上的HTML更改为<a href="javascript:void(0);"。

这样就不再需要return false点击命令

将ID tourteaser_teaser更改为tourteaser_teaser-1，tourteaser_teaser-2和＆amp; tourteaser_teaser

将类tourteaser_teaser添加到之前具有该ID的每个div

调整后的CSS以适应新的更改

还注意到.trigger设置为position: absolute;，因为父级是静态的，所有链接都是重叠的

解决这个问题我简单地将父设置为position: relative;

将您的JS简化为您在上一个示例中看到的内容

请参阅NEW UPDATE JSFIDDLE并告诉我这是否是您要找的内容？

Answer 2

这样的事情会起作用吗？

$(document).ready( function() {
    $('.toggle_container').hide();
    $('.trigger').click( function() {
        $('.toggle_container').slideUp('slow');
        $(this).next().slideToggle('slow');
        return false;
    });
});

Answer 3

看起来你的错误就在这里：

} else {
$('.trigger_active').next('.toggle_container').slideToggle('slow');
$('.trigger_active').removeClass('trigger_active');

您正在操作所有.trigger_active元素，而不仅仅是链接后的元素。

一个页面上有多个jQuery切换功能？

3 个答案:

WORKING JSFIDDLE HERE!