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

Question

我在菜单栏中有两个菜单图标，都属于 .menuentry，ID 为 #topicon 和 #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");
});

目前不工作......

Answer 1

您必须为 #topicicon 和 #searchform 创建两个 click handlers 并使用 .hide()和 .show() 如图所示:-

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

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

并且您正在使用具有相同 ID 的两个 div 即 searchform 所以更改第二个 searchform div 的 id说 searchform1 并尝试上面的代码。