0

私はjQueryを初めて使用し、クリックするとダイアログメッセージを開き、もう一度クリックすると閉じる関数をまとめるために最善を尽くしました。私が欲しいのは、ダイアログの外側（画面上の任意の場所）をクリックしてそのダイアログを閉じることができるようにすることです。私が書いたセットアップでこれをどのように達成できますか？また、私が現在正しく実行しているコードはありますか、それとも別のより簡単な方法で実行できますか？

編集（10/17/12）：

以下のjQueryを更新して、Ryan Whealeのコードの一部を含めました。これは、現在のステータスです。

-「clickoutside」は現在開いているスパンで機能します

-別のスパンを開こうとすると、現在のスパンが閉じ、続いて新しいスパンが閉じます

jQuery：http ://www.eclipsisna.com/?ena=services

        $(".service_outline a, .service_title a, .service_price a").click(function() {
            $(this).closest("a").children("span").fadeToggle("fast", function() {
                $("span").not(this).fadeOut("fast");
            });
            $(this).one("clickoutside", function () {
                $("span").fadeOut("fast");
            });
        });

HTML：

    <td class="service_outline">
            <h11><a>Opti-<br><h12>Coat</h12><span><font color="#ffcc00">&bull;</font> Application of permanent, nano ceramic clear resin coating (replaces "Wax"/"Sealant")<br><font color="#ffcc00">&bull;</font> Extended durability for 2+ years<br><font color="#ffcc00">&bull;</font> $250<p><center><img src="images/opti-coat.png"></center></span></a></h11>
    </td>
4

1 に答える 1

0

ここにあるBenAllmanのclickoutsideプラグインを使用している場合、あなたの生活は簡単です。

http://jsfiddle.net/ryanwheale/c89Vr/

var $links = $(".service_outline a, .service_title a, .service_price a"),
    $dialogs = $links.find( 'span' );

$links.on( 'click', showDialog );

/* -- EDIT: old code kept for historical purposes
$dialogs.on( 'clickoutside', hideDialogs );
*/

function showDialog (ev) {
    var $thisDialog = $(this).find( 'span' );

    /* -- EDIT: old code kept here for historical purposes
    $dialogs.not( $thisDialog ).fadeOut();
    */

    if(!$thisDialog.is(':visible')) {
        $thisDialog.fadeIn();

        /* -- EDIT: New code */
        setTimeout( function() {
            // IMPORTANT: touch events only supported when you use the 
            // modified plugin at the bottom of this example
            $thisDialog.one('clickoutside.closeDialog, touchstartoutside.closeDialog', function() {
                $thisDialog.unbind('.closeDialog').fadeOut();
            });
        }, 0);
    }
}

/* -- EDIT: old code kept here for historical purposes
function hideDialogs() {
    $dialogs.fadeOut();
}
*/

/*
 * jQuery outside events - v1.1 - 3/16/2010
 * http://benalman.com/projects/jquery-outside-events-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/

 * IMPORTANT: Modified to support touch events
 */
(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup touchstart touchmove touchend".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&&!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");
于 2012-10-15T23:48:25.927 に答える