1

私が欲しいのは本当にシンプルですが、必要な機能を追加しようとするたびに、物事を台無しにしてしまうので、助けを求めて、現在の基本的なスクリプトを使い続けることにしました。

私はすでに進行中のスクリプトを持っており、ほぼ次のように機能するように開発したいと考えています： https ://stackoverflow.com/a/7133084/1399030 { http://jsfiddle.net/Paulpro/YpeeR/25/ } （作成者：PaulP.RO）

  • 隠しスパンを開く
  • 隠されたスパンを隠す
  • スパンには、スパンを終了するための「閉じる」ボタンがあります
  • 別のスパンがトリガーされたときに現在開いているスパンを非表示にする

考えてみてください...画像ギャラリープレビュー機能...種類。

「プレビュー」スパンは、ウェブページで.popCoverまたはa.thumbnailクリックされたときにトリガーされます。この非表示のスパンは、jQueryがcssに挿入することにより、指定された一意のIDに基づいて表示されます。 これは、複数のアイテムを含むループ内にあります。 display: block;

私はここまで到達しました、そしてこれは私が使用する作業スクリプトです：

$(document).ready(function() {

    $('.popCover').click(function(){ 
     divID = $(this).attr('id');
        $("#tooltip-"+divID).fadeIn('5000', function() {
        $("#tooltip-"+divID).css("display", "block");
        });
    });

    $("a.thumbnail").click(function() {
     dvID = $(this).attr('id');
        $("#tooltip-"+dvID).fadeIn('5000', function() {
        $("#tooltip-"+dvID).css("display", "block");
        });
    });


});

しかし今、私はこれらの関数に、スパンを再び消えさせるdisplay: none;トリガーを追加する必要があります（そのcssに挿入することによって） 。

次の場合に現在のスパンを非表示にします。01。スパン要素の外側でマウスクリックが行われた
02。スパンの
内側で終了またはXボタンがクリックされた。（画像ギャラリーのように、画像をプレビューし、要素の外側をクリックするか、プレビュー内にある終了ボタンをクリックして画像を終了する場合）
03 .popCover .またはa.thumbnail再度クリックします（おそらく、別のIDの別のスパンをトリガーして表示します。 ）。

注：
現在、ページ上のアンカーをクリックすることができます。IDが異なるこれらのスパンはすべて、ページ上で積み重なって積み重なっていきます。私は本当にそれを望んでいません。一度に複数のスパンを開きたくないので、別のアンカークリックが行われたときに現在開いているスパンが自動的に終了する機能を追加したいと考えていました。

私は実際にこれを自分でやろうとしましたが...私が試した方法を取得できません。私はjQueryの専門家ではないため、これらすべての関数を一緒に追加するには複雑すぎました。私は1つを動作させてから、別の1つで動作させようとしてそれを台無しにすることができました。

また、私はスパンを終了するこの同様の方法を使用することを考えていました： 

$(".the_span").fadeOut("5000").css("display", "none");

私がプラグインを使用したくない唯一の理由は、私にとって単純なことです。私はすでに「プレビュー」スパンcssが本当に好きで、すべて準備ができています。jqueryの部分が機能する必要があります：

display: blockトリガーされたときのスパンに、そして言及display: noneされた条件が満たされている場合はそれ。

助けを期待して、そして一人一人に非常に感謝するでしょう！ありがとうございました。

4

2 に答える 2

0

私はついにこれを機能させることができました！：o）

を使用して、スパンが現在表示されている/開いている/またはCSSにdisplay：ブロックif ($("span.the_span").is(":visible"))があるかどうかを確認し、表示されている場合は、次のことを行います。-新しいスパンの表示に進む前に、現在開いているスパンを非表示にします。-class="the_span"

これが、私が望んでいたすべての機能に対応する、私の実用的な完成品です。

   $(document).ready(function() {

   // When clicks on either ".popCover" or "a.thumbnail" is made,
   // Funcion clickPOP is triggered:
   var clickPOP = function() {
        divID = $(this).attr('id'); 

        // Checks if "span.the_span" is already currently open:
        if ($("span.the_span").is(":visible")) {
        $("span.the_span").css("display", "none"); // If open, this is where it closes it..
        $("#tooltip-"+divID).fadeIn('200', function() { // Then, proceeds to open the new clicked span here.
                $("span.the_span #tooltip-"+divID).css("display", "block"); });
              }

         // But if no "span.the_span" is currently open:
         // No need to close anything, it will directly open the new span...
         else { 
            $("#tooltip-"+divID).fadeIn('5000', function() {
                $("span.the_span #tooltip-"+divID).css("display", "block"); });
                }
  } // End of Function. Added functionality starts below...

        // Exits "span.the_span" when mouse clicks outside of element
        // ... ("Outside of element" means: outside of "span.the_span")
        $(document).click(function(){
        $("span.the_span").css("display", "none");
        });

        // Exit Button : Exits "span.the_span" when exit button is clicked
        $('span.exitme').css('cursor', 'pointer').click(function(e){
        $("span.the_span").css("display", "none");
        e.stopPropagation();
        });

        // This makes sure that clicks inside "span.the_span" continue to work
        $('span.the_span').click(function(e){
        e.stopPropagation();
        });

        // This makes sure that clicks on ".popCover" continue to work
        $(".popCover").click(function(e){
        e.stopPropagation();
        });

        // This makes sure that clicks on "a.thumbnail" continue to work
        $("a.thumbnail").click(function(e){
        e.stopPropagation();
        });

// Clicks on both ".popCover" & "a.thumbnail"
// ... will trigger actions specified on function: clickPOP.
$(".popCover").click(clickPOP);
$("a.thumbnail").click(clickPOP);

    });

ご覧のとおり、要素の外側でマウスクリックしたときにスパンを$(document).click(function()非表示にするという本来の目的の機能を取得するためになども追加しましたが、（div）または（リンク）ウェブページ上。.popCover a.thumbnail

また、これらの投稿からのヒントがなければ、このメソッドの記述を完了することはできませんでした：
*同じ関数/異なるトリガーの実行： https ：//stackoverflow.com/a/1191837/1399030
*要素内のクリックを修正（終了を含む）ボタン）： https ：//stackoverflow.com/a/4660691/1399030
*何かが非表示または表示されているかどうかを確認する方法： https ：//stackoverflow.com/a/178450/1399030

私は特に最後の投稿が非常に役に立ったと感じました（そして基本的にそれは私が何をしていたかを理解させました）、なぜならポスター：Tsvetomir Tsonevは彼のコードコメントに含まれていました：

// Checks for display:[none|block], ignores visible:[true|false]"

私は当初、jQueryがインラインではないCSSをチェックまたは接続できることを本当に理解していなかったので（私自身はjQuery noobでした）、その投稿は確かに非常に啓発的でした。

もちろん、これを行うためのより良い、より効率的な方法があれば、私はもう少し啓発されてとてもうれしいです！jQueryはまだ私にとって学習曲線であり、私は非常に熱心な学生です！

于 2012-06-03T06:27:36.737 に答える
0

開いた/アクティブな要素にクラスを追加してから、すべてのイベントをバインドして閉じる必要があります。バインドは、クラス.activeを持つ要素に対して実行する必要があります。たとえば、閉じている場合は、.activeクラスを削除する必要があります。

于 2012-06-02T13:47:38.577 に答える