Php 隐藏表单，然后显示点击链接问题_Php_Jquery_Html

Php 隐藏表单，然后显示点击链接问题

php jquery html

Php 隐藏表单，然后显示点击链接问题,php,jquery,html,Php,Jquery,Html,我正在尝试为我的网站创建一个名为“高级搜索部分”的链接，该链接将显示我的搜索的附加选项，该选项将隐藏，直到用户单击高级搜索链接由于某些原因，所有内容都已显示。我已经尝试了一段时间，但在网上搜索却没有解决方案我对jquery相当陌生，所以我不太确定我是否做对了，但下面是我的代码： index.phpcode： <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jque

我正在尝试为我的网站创建一个名为“高级搜索部分”的链接，该链接将显示我的搜索的附加选项，该选项将隐藏，直到用户单击高级搜索链接

由于某些原因，所有内容都已显示。我已经尝试了一段时间，但在网上搜索却没有解决方案

我对

jquery

相当陌生，所以我不太确定我是否做对了，但下面是我的代码：

index.php
code：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script>
$(function() {
    $('#filter').hide();
});

$('body').on('click','nav a', function(e) {
    $('#filter').show();
    $('#filter').children().hide();
    $($(this).attr('href')).show();
    e.preventDefault();
});
</script>

</head>

<body>
<?php include_once("access_toppage.php"); ?>
<div id="middlepage">

    <div id="mainSearchArea">
        <form action="search.php" id="mainSearch" name="searchForm" method="POST">
            <input type="search" id="searchbar" placeholder="Search..." name="search">
            <select id"changes" name="change">
            <option value="">All Categories </option>
            <option value="Yatch">Yatch </option>
            <option value="Motor">Motor </option>
            <option value="Dingy">Dingy </option>
            <option value="Transport">Transport </option>
            <option value="Recreational">Recreational </option>

            </select>
            <input type="submit" id="go" value="Search">




    <nav>
        <a href="#filter">Advanced Search</a>
    </nav>
    <div id="filter">       
        <div id="city">
            <select id="city" name="city">
            <option value =""> All Cities</option>
            <option value="Dover">Dover </option>
            </select>
        </div>
    </div>

    </form>

.hide {
display:none;
}

#filter
{

}

你的css是

.hide{
     display:none;
}

您的链接的id为筛选器

#filter > * {
    display:none;
}

这将隐藏链接的所有子级

然后，我会将所有jquery移到页面底部

</body>

老实说，没有理由不把它藏起来。但是，我相信您的javascript代码末尾可能有一个您无法看到的字符

请参阅我的JSFIDLE。这是直接从上面复制的。注意代码末尾的小红点

现在看这把小提琴。请注意，红点已消失，下拉列表已隐藏

但是，即使使用此代码，当您单击链接时，也不会看到下拉列表。我已经修改了这把小提琴中的代码

$(document).ready(function () {
    $('#filter').hide();


    $('body').on('click', 'nav a', function (e) {
        e.preventDefault();
        $('#filter').toggle();
        //$('#filter').show();
        //$('#filter').children().hide();
        //$($(this).attr('href')).show();
    });
});

我试过你说的，它隐藏了我想要的一切，但当我点击它时，它仍然不起作用$（document）.on（'click'，'#filter'，function（）{$（this）.children（）.show（）；}）；不过，使用.slideToggle（）而不是.show（）可能是一个更好的选择，这样您可以单击它来显示或隐藏它们。我以前见过这种情况，实际上这是我几个月前回答的一个问题。很可能是从网站上复制的，带有某种类型的编码，或者作者的键盘上有外来字符；这恰好是我曾经帮助解决的问题。被屏蔽的字符将出现在任何好的IDE中+1 ;-)这个字符，就在

之前，刚刚在我的IDE中看到它，是

这是一个零宽度的空间。有关更多信息，请参阅和，其中最有可能是在文字处理器中完成的。
$(document).on('click', '#filter', function(){ 
    $(this).children().show(); 
});

$(document).ready(function () {
    $('#filter').hide();


    $('body').on('click', 'nav a', function (e) {
        e.preventDefault();
        $('#filter').toggle();
        //$('#filter').show();
        //$('#filter').children().hide();
        //$($(this).attr('href')).show();
    });
});