HTML 目标 - 首先单击 DIV，然后打开第二个 div答案

【问题标题】：HTML target - first click ON THE DIV and after open the second divHTML 目标 - 首先单击 DIV，然后打开第二个 div
【发布时间】：2017-11-28 22:41:39
【问题描述】：

我页面的站点地图，当我预览第二个 div 已经打开并且点击关闭并相应打开时，我将其设置为单击并显示第二个 div（更多信息），我希望第一次显示它, 被关闭。（下面的例子不行，不知道为什么，在m preview web上是可以的）

<script>
$(document).ready(function(){
    $("div.sitemapline").click(function(){
        $("div.sitemapfooter").toggle();
		    });
});
</script>

.sitemapline {
	width:100%;
	border:solid #F00;


}



.sitemapline2 li {
	display:inline-block;
	text-align:center;
}

<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li> 
</ul>
  </div>	</div>
  
  
  <div class="sitemapfooter">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>

`第一次显示关闭

【问题讨论】：

标签： html target

【解决方案1】：

您可以将此代码添加到脚本顶部，以便在页面打开时将其隐藏。

$(".sitemapfooter").hide();

最好的方法是使用 CSS，因为这将在 jQuery 运行之前而不是在 DOM 加载后隐藏元素。

CSS

.sitemapfooter {
    display: none;
}

【讨论】：

@Jim-miraidev 是对的。当页面打开时您仍然可以看到它时，可能会有一瞬间。 CSS 绝对是一个更干净的答案。

【解决方案2】：

只需将元素的内联样式设置为display: none，然后在页面加载时默认为隐藏。

$(document).ready(function(){
    $("div.sitemapline").click(function(){
        $("div.sitemapfooter").toggle();
    });
});

.sitemapline {
	width:100%;
	border:solid #F00;
}

.sitemapline2 li {
	display:inline-block;
	text-align:center;
}

<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li> 
</ul>
  </div>	</div>
  
  
  <div class="sitemapfooter" style="display: none">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>

【讨论】：

【解决方案3】：

只需将display: none 添加到sitemapfooter div，它会在启动时隐藏。

.sitemapfooter {
    display: none;
}

【讨论】：

【解决方案4】：

如果我正确理解您的问题，您希望默认隐藏第二个 div。

为了实现这一点，您必须更改针对“sitemapline2”类的 css 代码并添加显示样式为 none。

这将导致“sitemapline2”类的div在开始时不显示，并且当您单击jquery函数时将运行以将css样式更改为display:block显示您的信息div。

【讨论】：