1

1 つのページに 3 つのトグル関数を追加したい (すべて同じクラス)。

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

現時点では、この機能に反応するトグルは 1 つ (最初の 1 つ) だけです。3つすべてを単独で機能させるにはどうすればよいですか? 別のトグルがクリックされたときに、1 つのトグルが閉じても問題ありません。それは簡単に可能ですか？

編集: 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を作業中！

アップデート

1 つの大きな問題が見つかりました。まず、複数の要素に同じ ID を与えることは決して良い考えではありません。x がその要素のインデックス番号である<div id="tourteaser_teaser"ようなものに変更することを検討してください。<div id="tourteaser_teaser-x"第二に、CSS の目的でそれを行ったことがわかりました。この場合、同じ ID ではなく、すべて同じ CLASS 名を付けたいと考えています。好きなように多くのクラス名を持つことができますが、ID は 1 つだけです。

私はあなたの問題をすべて解決したと思います。

  • 前に述べたように、HTML を に変更し<a href=""ました<a href="javascript:void(0);"。
    • return falseこれにより、クリックコマンドの必要がなくなります
  • IDtourteaser_teaserをtourteaser_teaser-1、tourteaser_teaser-2、 &に変更しましたtourteaser_teaser
  • tourteaser_teaser以前にその ID を持つ各 divにクラスを追加しました
  • 新しい変更に合わせて調整された CSS
  • また、.trigger が設定されていることに気付きましposition: absolute;た。親が静的であるため、すべてのリンクが重複していました。
    • これを解決するには、親を単純に設定しますposition: relative;
  • 前の例で見たように JS を単純化しました

NEW UPDATE 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 に答える