Question

我正在尝试为我的网站创建一个名为“高级搜索部分”的链接，这将显示我的搜索的其他选项，这些选项将被隐藏，直到用户点击高级搜索链接。

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

我对jquery还不熟悉，所以我不太确定我是否正确行事，但这是我的代码：

index.php代码：

<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>

css代码：

.hide {
display:none;
}

#filter
{

}

Answer 1

说实话，没有任何理由可以隐藏它。但是，我相信您的javascript代码末尾可能会有一个您无法看到的字符。

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

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

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

$(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();
    });
});

Answer 2

你的css是

.hide{
     display:none;
}

您的链接ID为过滤器

#filter > * {
    display:none;
}

将隐藏链接的所有子项。

然后，我会在

之后将你的所有jquery移到页面底部

</body>

然后用

启动jquery

$(document).ready(function(){


//do stuff here

});
</html>

更新：

jsfiddle

$(document).on('click', '#filter', function(){ 
    $(this).children().show(); 
});

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

2 个答案: