jQuery複数の非表示パネルの問題

Question

私はいくつかの非表示のスライドパネルの設定に取り組んできました。私はこれまでかなりうまくいくように見える「スライダー」を見つけました。私はパネルを適切に開いて、パネルウィンドウをクリックして閉じることができます。今私は最後の1つの問題を仕上げようとしています。

パネルが開いているので、パネルは重ねて表示されます。私がしたいのは、別のパネルが開いているので、これらのパネルを閉じることです。私はスクリプトを調整しようとしましたが、私はjQueryとスクリプティングには全く新しいものです。ここで私は、現在持っているものです：私はこれに追加されたトグル機能のいくつかのタイプを持っている必要がありますが、いくつかの試みの後、私はどこにも高速に取得しています見つけることができるものから、

<script type="text/javascript" src="../js/slidepanel/jquery.slidePanel.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    // default settings 
    // $('.panel').slidePanel(); 

    // custom settings 
    $('#panel1').slidePanel({ 
     triggerName: '#trigger1', 
     position: 'fixed', 
     triggerTopPos: '300px', 
     panelTopPos: '25px', 
    }); 

    $('#panel2').slidePanel({ 
     triggerName: '#trigger2', 
     position: 'fixed', 
     triggerTopPos: '340px', 
     panelTopPos: '210px' 
    }); 

    $('#panel3').slidePanel({ 
     triggerName: '#trigger3', 
     position: 'fixed', 
     triggerTopPos: '380px', 
     panelTopPos: '210px', 
    }); 
}); 
</script> 

。どんな情報でも大歓迎です。この質問に適切に答えるために必要な情報がある場合はお知らせください。見ていただきありがとうございました。ありがとうございました！

Answer 1

仮定：

1. あなたはあなたがする能力を維持しながら、現在のトリガーに属さない閉鎖する他のすべてのパネルを望んhttp://plugins.jquery.com/project/slidePanel
2. でslidepanelプラグインを使用しているように見えます現在のトリガーのパネルを切り替えます。

SOLUTION
あなたは意図したパネルを表示する）slidePanelを（実行する前に、すべてのパネルを非表示になりますプラグインに小さな変更を加えることができます。

if (!panel.is(':visible')) { 
    $('.panel').hide(opts.speed);$('.trigger').removeClass('active'); 
} 

全体のプラグインは、（「StackOverflowののEDIT」というコメントを探してください）あなたが変更を加える必要がある場所を示すために、以下に含まれています。プラグインのデモページのマークアップを使用して、jsfiddleのworking exampleをjsfiddleで参照してください。

/* jQuery slidePanel plugin 
* Examples and documentation at: http://www.jqeasy.com/ 
* Version: 1.0 (22/03/2010) 
* No license. Use it however you want. Just keep this notice included. 
* Requires: jQuery v1.3+ 
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 
* OTHER DEALINGS IN THE SOFTWARE. 
*/ 
(function($){ 
    $.fn.slidePanel = function(opts) { 
     opts = $.extend({ 
      triggerName: '#trigger', 
      position: 'absolute', 
      triggerTopPos: '80px', 
      panelTopPos: '50px', 
      panelOpacity: 0.9, 
      speed: 'fast', 
      ajax: false, 
      ajaxSource: null, 
      clickOutsideToClose: true 
     }, opts || {}); 

     var panel = this; 
     var trigger = $(opts.triggerName); 
     var isIE6 = $.browser.msie && $.browser.version=="6.0" 

     // ie6 doesn't like fixed position 
     if(isIE6) { opts.position = 'absolute' } 
     // set css properties for trigger and panel 
     trigger.css('position',opts.position) 
     trigger.css('top',opts.triggerTopPos); 
     panel.css('position',opts.position) 
     panel.css('top',opts.panelTopPos); 
     panel.css('filter', 'alpha(opacity='+(opts.panelOpacity*100)+')'); 
     panel.css('opacity', opts.panelOpacity); 

     // triggerName mousedown event 
     trigger.attr("href", "javascript:void(0)").mousedown(function() { 
      // load default content if ajax is false 

      // STACKOVERFLOW EDIT: http://stackoverflow.com/questions/2551217/jquery-select-all-elements-of-a-given-class-except-for-a-particular-id 
      // hide all panels and reset all trigger classes. first check if visible to allow toggle to function 
      if (!panel.is(':visible')) { 
       $('.panel').hide(opts.speed);$('.trigger').removeClass('active'); 
      } 

      if (!opts.ajax) { 
       panel.toggle(opts.speed); 
       trigger.toggleClass("active"); 
      }; 
      // load ajax data if ajax is true or throw error if no ajaxSource defined 
      if (opts.ajax && opts.ajaxSource!=null) { 
       // fetch data ONLY when panel is hidden... 
       // otherwise it fetches data when the panel is closing 
       if (!panel.is(':visible')) { 
        panel.load(opts.ajaxSource, function(response, status, xhr) { 
         // if the ajax source wasn't loaded properly 
         if (status !== "success") { 
          var msg = "<p>Sorry, but there was an error loading the document.</p>"; 
          panel.html(msg); 
         }; 
         // this is part of the .load() callback so it fills the panel BEFORE opening it 
         panel.toggle(opts.speed); 
        }); 
       } else { 
        panel.toggle(opts.speed); 
       }; 
       trigger.toggleClass("active"); 
      } else if (opts.ajax && opts.ajaxSource==null) { 
        alert('You must define an ajaxSource to use Ajax.'); 
       }; 
      return false; 
     }); 

     if (opts.clickOutsideToClose) { 
      // bind the 'mousedown' event to the document so we can close panel without having to click triggerName 
      $(document).bind('mousedown',function(){panel.hide(opts.speed);trigger.removeClass('active');}); 

      // don't close panel when clicking inside it 
      panel.bind('mousedown',function(e){e.stopPropagation();}); 
     }; 
    }; 
})(jQuery);