Question

我的基本要求是在我的网站中添加一个下拉列表。我需要当有人点击文本时，表单会从上到下显示一个带有动画效果的表单，如果我们再次单击该文本，它将再次隐藏。

您可以访问我想要此功能的页面：

http://test.techkalph.com/listing-plain-heading/?filter=all&type=travel-travel-agents&submit=

在右侧边栏的顶部，您可以看到一个按位置搜索的按钮。当您检查该按钮时，您可以看到在我显示的那个按钮下面的div下面有一个表单：none来隐藏它。

我希望在单击按钮时显示该表单并再次隐藏，点击那里（切换功能）时会有一些动画效果。

我已经为此目的添加了这个脚本，您也可以在inspect元素中找到它：

<script>
    jQuery(document).ready(function($){
        $(".section-sidebar #custom_location").click(function(){
            $(".section-sidebar div #directory-advance-search-form").show();
        });
        $(".section-sidebar #custom_location").click(function(){
            $(".section-sidebar div #directory-advance-search-form").hide();
        });
    });
</script>

但它不起作用。难道我做错了什么？请访问我的上一页并帮助我在点击时显示表单并在点击时再次隐藏。

提前谢谢。

Answer 1

你的js看起来多余：在同一个点击处理程序中，你显示和隐藏div - 有效地，你什么都不做:)

相反，只需拨打一次$(".section-sidebar div #directory-advance-search-form").toggle()

即可

有些事情：

jQuery(document).ready(function($){
    $(".section-sidebar #custom_location").click(function(){
        $(".section-sidebar div #directory-advance-search-form").toggle();
    });
});

我在控制台中对此进行了测试，效果很好。

如果您必须出于任何原因使用单独的处理程序（我知道：有时项目有非常奇怪的要求），您应该使用标记测试操作：

设置一个布尔值，类似于var advIsShown=false
显示\ hidden时，切换布尔状态。
在您决定是否致电.show()或.hide()

Answer 2

我添加了此脚本，以使表单切换为时间间隔：

<script>
    jQuery(document).ready(function($){
        $(".section-sidebar #custom_location").click(function(){
            $(".section-sidebar div #directory-advance-search-form").toggle(1000);
        });
    });
</script>

用户可以根据自己的要求调整1000.

再次感谢凯文。

为文本添加切换功能

2 个答案: