Question

我在我的一个网页上使用了slideUp和slideDown JQuery幻灯片效果，以获得更多/更少选项的基本搜索和高级搜索。它运作完美。我正在使用此代码。但问题是，当我点击更多选项时，它会在滑动时跳跃。但是当我在管理员模式下使用相同的功能时（以管理员身份登录网站后），它可以顺利运行。我尝试过很多在互联网上找到的方法，但是无法解决。任何人都可以检查我的代码是否有任何问题？

感谢您的时间。

编辑：什么时候跳？ - 默认情况下，有一个基本搜索和一个“更多选项按钮” 单击“更多选项”，将基本搜索和slideDown向上滑动同步高级搜索，以及高级搜索的slideDown 即将完成，它突然跳了起来。我希望这是有道理的。

EDIT2：以下是 fiddle。这是示例代码，因为我在高级搜索中有一些选择语句，我们可以清楚地看到它何时跳转。

<script>
    jQuery.noConflict();
    jQuery(document).ready(function($) {
        $(".view-filters").hide();
        $(".more").click(function() {

            $(".search-form").slideUp("slow");
            $(".view-filters").slideDown("slow");
        });
        $(".less").click(function() {
            $(".view-filters").slideUp("slow");
            $(".search-form").slideDown("slow");
        });
    });
</script>

<< There is some code here for Search form. >>

<div class = "search-form more"><b>More Options</b> <img src = "images/down_arrow.jpg"></img></div>
<div class = "view-filters less"><b>Less Options</b> <img src = "images/up_arrow1.jpg"></img></div>

<style>
    .search-form
    {
        overflow: hidden;

    }
    .view-filters
    {
        display:block;
    }
    .pager
    {
        display:none;
    }
    table
    {
        display:none;
    }
</style>

<< There is some code here for Advanced Search Form>>

Answer 1

你的jsfiddle模型中的HTML你真正拥有的是什么吗？它缺少“Less Options”的结束</div>，但是对于每次点击，你有两个元素向上滑动，两个元素向下滑动。如果每个方向都有一个元素幻灯片，它的效果会更好。

你可以像这样嵌套你的元素：

<div class="search-form">
There is some code for the basic search here.
<div class="more"><b>More Options</b></div>
</div>

<div class="view-filters">
<div class="less"><b>Less Options</b></div>
There is some code for the advanced search here.
</div>

jsfiddle

或者甚至是like this。

Answer 2

（声名大于50的人应该将此作为评论发布，或者应该告诉我还有什么可以解决这个问题，但我正在研究我现在所拥有的... 。）

对于有类似问题的任何人来说，首要问题似乎是Here is my splash activity xml This is an easy solution and places the text bellow the image. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="fill_parent" android:background="@color/colorIcons" tools:context=".SplashActivity"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_centerVertical="true" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/splashImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="30dp" android:gravity="center_horizontal" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher"> </ImageView> <TextView android:id="@+id/splashText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="@string/app_name" android:textColor="@color/colorPrimary_text" android:textSize="36sp" /> </LinearLayout>对某些元素的价值。

在包含Bootstrap 3.3.7 的网页上，我在包含margin的{{1}}上使用slideUp()以及其他一些内容。

我在div调用<h3>后立即停止跳转的关键是在其slideUp()上设置div。

SlideUp / SlideDown会导致跳转

2 个答案: