Question

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

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)

此外，我使用data-target属性触发器，它等于目标面板的id。

我需要什么：

点击任意.btn-*会触发相应的面板。面板从顶部向下滑动，页面主体同时滑动。很容易实现。完成。
触发任何面板时，应检查是否有任何面板打开（此面板或任何其他面板）。如果是，则触发该面板和页面主体关闭并且仅在此之后 - 显示新面板（并再次移动主体，到新位置）。那就是我被困住的地方。

在@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
})

Answer 2

要检查pannel是打开还是关闭，您可以使用类。在打开pannel时，添加类似“PannelOn”的类来打开pannel。关闭后删除此课程。

然后当你打开一个面板时，在打开之前检查是否存在任何带有“PannelOn”类的元素并关闭它（调用你的doTransform函数）。

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

2 个答案: