1

私はjavascriptをあまり使用せず、問題を理解するためにここ数時間グーグルで検索しました。検索するのに適切な単語がわからないと思います。

これが私が達成したいことです。横に小さな矢印が付いたリンクのリスト。リンクをクリックすると、非表示のdivが表示され、矢印が下に移動して、テキストが「開いている」ことを示します。別のテキストをクリックすると、矢印が再び上に移動し、divが非表示になります。他のdivはそれに応じて開きます。しかし、コードはまだ少しバグがあります。リンクをクリックすると、クラスが「展開」されますが、別のアイテムをクリックしても、このクラスは自動的に削除されません。

これまでの私のコードは次のとおりです...jsfiddleではまったく機能しません。理由はわかりませんhttp://jsfiddle.net/DvH75/

var _hidediv = null
   function showdiv(id) {
   if(_hidediv)
      _hidediv();
   var div = document.getElementById(id);
   div.style.display = 'block';
    $(".toggle").on("click", function(){
        $(this).toggleClass("expanded");
      });
   _hidediv = function () { div.style.display = 'none'; };
   }

そして、これは私がアーカイブしたいものの例です。唯一の違いは、開いているアイテムをもう1つ開くと閉じたいということです： https ：//www.facebook.com/help/473865172623776/

あなたが私の質問を理解し、私を助けることができることを願っていますありがとうございました!!

4

3 に答える 3

0

jsFiddleのHTMLを使用すると、以下のjQueryが期待どおりに機能するはずです。

$('a.toggle').on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('expanded').next('div').toggleClass('open');
});

.openCSSでクラスを宣言する限り：

ul.fade_text li div.open { display: block; }

更新されたフィドル：http：//jsfiddle.net/DvH75/3/

onclick="showdiv('astro-1'); return false;"また、目立たないスクリプトを使用して<a>タグにを付ける必要はありません。

于 2013-02-06T18:17:58.300 に答える
0

あなたのtoggleClass（）呼び出しは、クリックされたクラスにクラスを追加していますが、前にクリックされたクラスを削除しているようには見えません。私がすることは次のようなものです：

$('.expanded').each(function() {
    $(this).removeClass('expanded');
});

編集：実例

私はjsFiddleでしばらく過ごし、この動作例を取得しました（警告、jsFiddlerはIE8では動作しないようです。そのため、FireFoxまたはChromeを使用して例を表示してください）。

まず、'表示を削除しました：なし; 'main.cssのUL.fade_textlidivスタイルから、不要になったため。

次に、すべての*div*にクラスマーカーを追加しました。私はおそらく何か他のことをすることができたかもしれませんが、これは簡単な例でした。

最後に、JSをよりjQueryっぽくするように書き直しました。クラスが展開されているクラストグルを持つアンカータグが見つかったかどうかに基づいて、divを表示または非表示にする関数を作成しました。次に、showHideDivs（）関数を呼び出すクリックイベントハンドラーをすべてのアンカータグに追加しました。これもjQueryを使用しています。また、初期状態が適切に設定されるように、$（document）.ready（）にshowHideDivs（）の呼び出しを追加しました。

これが新しいJSコードです。物事を少し最適化するためにおそらくtweekedされる可能性がありますが、私が期待するように機能します。

$(document).ready(function () {
    function showHideDivs() {
        $('.showHideDiv').each(function () {
            if ($(this).prevAll('a.toggle:first').hasClass('expanded')) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    $('a.toggle').click(function () {
        var addExpanded = !$(this).hasClass('expanded');
        $('a.toggle').removeClass('expanded');
        if(addExpanded) {
            $(this).addClass('expanded');
        }
        showHideDivs();
    });

    showHideDivs();
});

このアプローチの利点は、JSに問題があるブラウザ、またはJSをオフにしているブラウザでは正常に機能が低下することだと思います。最終結果は、それらの人々がすべてのdivタグが展開されているのを見るということです。

于 2013-02-06T18:11:30.440 に答える
0

これがあなたが探しているものだと思います。含まれているすべてのdivを非表示にして、現在のdivを表示するだけです。最後のものを追跡する必要はありません。

$(function() {
$(".fade_text .toggle").on("click", function (e) {
    e.preventDefault();
    $(".fade_text div").hide();
    $(".fade_text .toggle").removeClass("expanded");
    $(this).addClass("expanded").next("div").show();
});
});

フィドル： http： //jsfiddle.net/4JFcK/4/

編集：クリック時にすべての展開されたアンカーも削除します

于 2013-02-06T18:29:34.377 に答える