0

そこで、クリックされている要素を開閉する表示/非表示スクリプトを作成しました。しかし、今はどうにかしてそれを機能させることができず、その理由を理解できません。

誰かがそれを見てみることができますか？

HTML

<div id="fleresvar" class="fleresvar">  <u><b>Klik her for at se flere svar</b></u>

    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;"></div>
</div

JavaScript

$("#fleresvar").click(function () {
    var $element = $(this);
    if ($(this).hasClass('open')) {
        $element.removeClass("open");
        $element.children(".txtmore").hide(500);
    } else {
        $(".open").removeClass("open");
        $('.txtmore').hide(500);

        $element.toggleClass('open');
        $element.children('.txtmore').toggle(500);
    }

});

jsフィドル

4

4 に答える 4

2

このフィドルをチェック

$(document).ready(function(){
    $(".fleresvar").on('click','.handler',function () {
        var $element = $(this).closest('.fleresvar');
        if ($element.hasClass('open')) 
        {
            $element.removeClass("open");
            $element.find(".txtmore").hide(500);
        } 
        else 
        {
            $(".open").removeClass("open");
            $('.txtmore').hide(500);    
            $element.addClass('open');
            $element.find('.txtmore').show(500);
        }    
    });
});

HTML

<div id="fleresvar" class="fleresvar">  
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>

<div id="fleresvar2" class="fleresvar"> 
    <div class="handler"><u><b>Klik her for at se flere svar</b></u></div>
    <div id="txtmore" class="txtmore" style="display:none;">
        <div id="txtask1" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask1</div>
        <div id="txtask2" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask2</div>
        <div id="txtask3" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask3</div>
        <div id="txtask4" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask4</div>
        <div id="txtask5" style="text-decoration:underline;color:#8F8F8F;cursor:pointer;">txtask5</div>
    </div>
</div>
于 2013-10-23T06:44:26.950 に答える
0

スクリプトの表示/非表示

    var toggle = 0;

$("#fleresvar").click(function (e) {
if (toggle == 0) {
            $('.txtmore').stop(true,true).show('500');
            toggle = 1;
        } else if (toggle == 1) {
            $('.txtmore').stop(true,true).hide('500');
            toggle = 0;
        }
        e.stopPropagation();
        return false;

});

と例

デモ

于 2013-10-23T06:39:08.280 に答える
0

このフィドルを確認してください：

$("#fleresvar").click(function () {
    var $element = $(this);
    if ($(this).hasClass('open')) {
        $element.removeClass("open");
        $element.children(".txtmore").hide(500);
    } else {
        $(".open").removeClass("open");        

        $element.toggleClass('open');
        $element.children('.txtmore').show(500);
        $('.txtmore').show(500);
    }

});
于 2013-10-23T06:51:34.840 に答える
0

コードは機能しているように見えますが、txtask* div 内にコンテンツがないため、何も表示されません。それらに何かを追加すると、動作中のトグルが表示されます。ただし、いくつかの提案があります。

およびタグは HTML4 で廃止され<u>、<b>セマンティックな意味で使用するために HTML5 に戻されました。つまり、これらのタグは、意味を追加する場合にのみ使用する必要があります (たとえば、スペルミスのある単語に下線を引く場合など)。同じ効果を得るには、CSStext-decoration: underline;とを使用する必要があります。font-weight: bold;詳細については、こちらを参照してください: http://html5doctor.com/u-element/

この行:は次の$element.children(".txtmore").hide(500);ように簡略化できます。$('#txtmore').hide(500);

これにより、2 つのことが行われます。children 関数を使用する必要がなくなるため、処理が少なくなります。また、jQuery での ID による選択は、クラスによる選択よりもはるかに高速です。5 つの要素では違いはありませんが、より複雑なプロジェクトに入ると違いが生じます。必要な要素が一意である (つまり、ページ全体に 1 つしかない) 場合は、ID を使用します。

メインの #fleresvar div で .open クラスを切り替えたいようです。これが唯一の場所である場合、次の 2 つの行が競合しています。 $(".open").removeClass("open"); $element.toggleClass('open');

1 行目は .open を含むすべての要素から .open を削除し、2 行目は #fleresvar に .open を追加します。メイン要素に追加/削除するだけの場合は、$element.addClass('open')and $element.removeClass('open')、または$element.toggleClass('open')2 回実行します。私は個人的に addClass と removeClass を使用するのが好きなので、クラスが追加/削除されたことを確実に知ることができます。

txtask* div の場合: それぞれに同じインライン スタイルを配置する代わりに、それらに共通のクラスを追加してから、スタイルを CSS ファイルに移動します。

これが私の推奨する変更を加えた jsFiddle です: http://jsfiddle.net/2Saph/9/

HTML:

<div id="fleresvar" class="fleresvar">Klik her for at se flere svar
    <div id="txtmore" class="txtmore">
        <div id="txtask1" class='txtask'>a</div>
        <div id="txtask2" class='txtask'>b</div>
        <div id="txtask3" class='txtask'>c</div>
        <div id="txtask4" class='txtask'>d</div>
        <div id="txtask5" class='txtask'>e</div>
    </div>
</div>

JS:

$("#fleresvar").on('click', function (evt) {
    evt.preventDefault();
    var $element = $(this);
    if ($element.hasClass('open')) {
        $element.removeClass("open");
        $('#txtmore').hide(500);
    } else {
        $element.addClass("open");
        $('#txtmore').show(500);
    }
});

CSS:

#fleresvar {
    cursor:pointer;
    background-position: 0 4px;
    min-height: 15px;
    border: 0 solid #000000;
    margin: 2px 0 5px 0;
    padding: 0 0 0 15px;
    background-image:url('/images/images/Pil_normal.png');
    background-repeat: no-repeat;
    font-weight: bold;
    text-decoration: underline;
}
#fleresvar.open {
    background-image: url('/images/images/Pil_open.png');
}
#txtmore {
    display: none;
    width: 280px;
    min-height:15px;
    border: 0 solid #000000;
    margin: 0;
}
div.txtask {
    text-decoration:underline;
    color:#8F8F8F;
    cursor:pointer;
}
于 2013-10-23T07:23:51.127 に答える