javascript - jQuery 链接多个自定义函数来触发多个面板

Question

我有多个面板位于屏幕外，具有 translateY 属性。 这些面板具有不同的高度。 它们由这个 ids 标识:

Panels:
  #panel-search // search form
  #panel-login // login form
  #panel-register // registration form
  #panel-navigation // navigation panel

整个可见页面本身是:

#page

并且每个面板都由其自己的链接触发:

Triggers:
  .btn-search // trigger search panel
  .btn-login // trigger login panel
  .btn-register // trigger registration panel
  .btn-nav // trigger navigation (this button shows only on mobile)

我还使用了等于目标面板 ID 的 data-target 属性 oon triggers。

我需要什么:

1. 单击任何 .btn-* 将触发相应的面板。面板从顶部向下滑动，页面主体同时滑动。实现起来很简单。完成。
2. 当触发任何面板时，它应该检查是否有任何面板打开(这个或任何其他)。如果是，则触发该面板和页面主体关闭，并且仅在此之后 - 显示新面板(并再次将主体移动到新位置)。那就是我被困的地方。

在@GauravBarar 的建议下，我重写了代码，现在一切正常，除了链接。当有任何打开的面板时 - 我将其关闭(并将页面也移至顶部)，然后打开请求的面板。但它同时发生，同时发生。而且我只需要在原始面板关闭后才能打开新面板。尝试添加 setTimeout()(请参阅代码中的注释部分)- #page 在此超时时向上/向下移动就好了，而面板 - 不要。

到目前为止，这是我的代码:

/**
 * Get real height of requested panel and prepare css transform property value.
 */
function getTransformProperty( panel ) {
    panelHeight = $('#'+panel).outerHeight();
    property = 'translateY(' + panelHeight + 'px)';
    return property;
}

/**
 * Move #page down by requested panel's height
 */
function setTransformProperty( property ) {
    $('#page').css({
        '-webkit-transform': property,
        '-moz-transform': property,
        '-ms-transform': property,
        '-o-transform': property,
        'transform': property
    });
    // Go to top (some triggers are in site footer, so we need this)
    window.scrollTo(0, 0);
}

// Trigger panels
$('[class*=trigger-]').click(function(){

    // Get target element to trigger
    var target = $(this).attr('data-target');

    // Check if current target is already opened and close it.
    if( $('#'+target).hasClass('is-visible-top') ) {

        $('#'+target).removeClass( 'is-visible-top' ); // move up requested panel
        setTransformProperty( 'translateY(0)' ); // move up page

        return false; // exit

    }

    // Check all panels in a loop. If any is opened - close it.
    $('[id*=panel-]').each(function(){

        // Get current panel's ID
        curPanelID = $(this).attr('id');

        if( $('#'+curPanelID).hasClass('is-visible-top') && curPanelID !== target ) {

            // A panel is opened.

            // Close it.
            $('#'+curPanelID).removeClass( 'is-visible-top' ); // move up currently open panel
            setTransformProperty( 'translateY(0)' ); // move up page

            // Open requested panel (HERE WE NEED A TIMEOUT)
            $('#'+target).addClass( 'is-visible-top' ); // move down requested panel
            setTransformProperty( getTransformProperty(target) ); // move down page by new height

            /* HERE'S TIMEOUT WHICH I TRIED BUT FAILED.
            setTimeout(function(){
                $('#'+target).addClass( 'is-visible-top' );
                setTransformProperty( getTransformProperty(target) ); 
            },300);
            */

            // exit each loop
            return false;

        } else {

            // No panel is opened. Just open requested without timeout.

            setTransformProperty( getTransformProperty(target) ); // move down page
            $('#'+target).addClass( 'is-visible-top' ); // move down requested panel

        }

    });

});

非常感谢任何帮助。

Answer 1

您可以尝试使用 jQuery 通配符，如下所示:

$('[id*=panel-]').each(function(){
    //check if anyone is on or off
})