1

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

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

4

3 回答 3

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>

看

在这里工作 JSFIDDLE！

更新

发现一个主要问题，首先，给多个元素提供相同的 ID 绝不是一个好主意，考虑更改为x 是该元素的索引号之<div id="tourteaser_teaser"类的东西。<div id="tourteaser_teaser-x"其次，我看到你这样做是出于 CSS 的目的，在这种情况下，你想给它们都赋予相同的 CLASS 名称，而不是相同的 ID。您可以拥有多个类名，但只有一个 ID。

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

  • 如前所述，我将您的 HTML 更改<a href=""为<a href="javascript:void(0);".
    • 这消除了return false点击命令的需要
  • 将 ID 更改tourteaser_teaser为tourteaser_teaser-1, tourteaser_teaser-2, &tourteaser_teaser
  • 将类添加tourteaser_teaser到之前具有该 ID 的每个 div
  • 调整 CSS 以适应新的变化
  • 还注意到 .trigger 设置为position: absolute;，因为父级是静态的，所以你的所有链接都是重叠的
    • 为了解决这个问题，我简单地将父级设置为position: relative;
  • 将您的 JS 简化为您在我之前的示例中看到的内容

请查看新的更新 JSFIDDLE并告诉我这是否是您要查找的内容？

于 2012-04-18T14:47:25.477 回答
0

像这样的东西会起作用吗？

$(document).ready( function() {
    $('.toggle_container').hide();
    $('.trigger').click( function() {
        $('.toggle_container').slideUp('slow');
        $(this).next().slideToggle('slow');
        return false;
    });
});
于 2012-04-18T14:40:37.967 回答
0

看起来你的错误在这里：

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

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

于 2012-04-18T14:44:22.667 回答