javascript - 如何使用jQuery onclick事件更改父<div>元素内子元素<span>的CSS？

我在菜单栏中有两个菜单图标，都被分类为.menuentry，其ID为#topicicon和#searchicon。在它们下面是两个较大的div，分别是#topiclist和#searchform，它们都初始设置为display:none;。

我想做的是单击每个菜单图标并在下面显示相应的较大div，并且如果以前已显示过另一个较大的div，则将其删除。

因此，例如，当我单击#topicicon时，它显示#topiclist并隐藏#searchform。

该代码正在此网站的顶部菜单栏中使用：http://bonfiredog.co.uk/bonfog

这就是我正在使用的代码。

HTML：

<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>

<div id="topiclist"></div>
<div id="searchform"></div>

CSS：

#topiclist {
     display:none;
}

#searchform {
     display:none;
}

jQuery的：

$("#topicicon").click(function(){
    $("#topiclist").css("display", "visible");
    $("#searchform").css("display", "none");
    }, function(){
    $("#formlist").css("display", "hidden");
});

截至目前无法正常运作...

最佳答案

您必须为#topicicon和#searchform创建两个单击处理程序，并使用.hide()和.show()，如下所示：

$("#topicicon").click(function(){
    $("#topiclist").show();
    $("#searchform1").hide();
});

$("#searchform").click(function(){
    $("#topiclist").hide();
    $("#searchform1").show();
});

并且您正在使用具有相同ID的两个div，即searchform，因此将第二个searchform div的ID更改为说searchform1，然后尝试上面的代码。