Question

我在菜单栏中有两个菜单图标，分别为.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");
});

现在不工作......

Answer 1

您必须为#topicicon和#searchform制作两个点击处理程序，然后使用.hide()和.show()，如下所示： -

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

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

您正在使用两个具有相同ID <{1}}的div，因此请更改第二个{{1}的 ID } div来说searchform并尝试上面的代码。

Answer 2

您可以避免编写多个点击处理程序，并使用以下内容重复使用不同的组件：

$(function () {
  
  $('.showRelated').click(function () {
    var relatedId = $(this).data('rel');
    
    $('.related').hide(); // hide all related elements
    $(relatedId).show(); // show relevant
  });
  
});

.related {
  display: none;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>

<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>

Answer 3

“可见”不是显示适当值的正确值。您应该添加“display：block”，或“display：inline-block”，或“display：inline”或显示适当性允许的任何其他值。

如何在父<div>元素中更改子元素<span>的CSS使用jQuery onclick事件？</div> </span>

3 个答案: