Question

这是我尝试为我的项目做的事情。我有一个包含在div标签中的简单内容框。添加了段落，并且自己拥有自己的规则ID。我设置了边距，填充等，依此类推。然后在底部，我添加了一个典型的提交按钮。我标记的内容更多。随着内容框内的溢出，我想增加高度，以便它可以显示文本的其余部分。但是，当我使用带有if / else语句的匿名函数添加onclick命令时，事情会变得有点刺耳。

首先是HTML代码。

＆＃13;

    var content = document.getElementById('contentbox');
    var button = document.getElementById('showMore');
    
    button.onclick = function() {
    	if(content.className == "open") {
    		content.className = "";
    	} else {
    		content.className = "open";
    	}
    };

＆＃13;

    body {
    	padding:0;
    	margin:0;
    	font-family:sans-serif;
    }
    
    #contentbox {
    	margin:100px 300px 100px 300px;
    	border:1px solid black;
    	padding:5px 0px 5px 20px;
    	max-height:200px;
    	overflow:hidden;
    	background:silver;
    	border-radius:10px;
    
    }
    #contentbox.open {
    	max-height:1000px;
    	overflow:visible;
    }
    #content {
    	color:white;
    	font-size:20px;
    	text-indent:30px;
    }
    
    #showMore {
    	margin-left:auto;
    	margin-right:auto;
    	display:block;
    	background:gray;
    	font-size:40px;
    	text-transform:uppercase;
    	font-family:impact;
    	color:silver;
    	transition:all 0.5s ease-in-out;
    }
    #showMore:hover {
    	color:gray;
    	background:silver;
    	cursor:pointer;
    }

＆＃13;

      <html>
    <head>
    	<title>Kenneth's new HTML/CSS Exercise</title>
    	<meta charset="UTF-8">
    	<link rel='stylesheet' type='text/css' href='contentbox.css'>
    	<script src="stuff.js"></script>
    </head>
    <body>
    <div id="contentbox">
    <p id="content">
    this is a bunch of text for you to read and Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed at Titanic Studios in Belfast, on location in the United Kingdom, and in Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its sixth season ended on June 26, 2016. The series was renewed for a seventh season,[1] which is scheduled to premiere on July 16, 2017.[2] The series will conclude with its eighth season in 2018 </p>
    
    <p id='content'> Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast. The first story arc follows a dynastic conflict among competing claimants for succession to the Iron Throne of the Seven Kingdoms, with other noble families fighting for independence from the throne. The second covers attempts to reclaim the throne by the exiled last scion of the realm's deposed ruling dynasty; the third chronicles the threat of the impending winter and the legendary creatures and fierce peoples of the North. </p>
    
    <p id='content'> Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has attracted criticism. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. </p>
    
    </div>
    
    <input type='submit' value='Show more' id="showMore"></input>
    
    </body>
    </html>

＆＃13;

发生了什么，我该怎么做才能修复它？

Answer 1

尝试这样做：

var content = document.getElementById('contentbox');
var button = document.getElementById('showMore');

button.onclick = function(e) {
    e.preventDefault();
    //do your logic
    if(content.className == "open") {
        content.className = "";
    } else {
        content.className = "open";
    }
    //
};

这样就可以防止跳过逻辑的提交事件。但在这种情况下，您需要在所有操作后手动提交表单。

Answer 2

将其设置为高度而不是最大高度希望它有所帮助

Answer 3

这里发生了什么。

.open个样式溢出：可见属性使得即使在框的最大高度之后文本仍然被浏览器绘制。你可能不想要那个。

如果您这样做，高度将根据内容计算。

#contentbox.open {
  height: auto;
  max-height: initial;
}

Working jsfiddle

除非您想要更改滚动行为（通常），否则不应更改溢出属性。 max-height initial将覆盖最大高度。

如果您想要滚动条，请执行以下操作：

#contentbox.open {
  overflow: auto;
}

如果您想要静止，可以更改最大高度。

希望这是一个很好的解释。

其他用户指出您的按钮是提交按钮。这可能会导致问题，因为它可能会触发页面加载，从而使您尝试执行的操作无效。在之前的jsfiddle链接上，该按钮不提交表单，因此代码按原样运行（不返回false，更改按钮类型或停止传播）。

但是如果你没有提交表单，你可能想要改变你的点击处理程序返回false，比如这个paste bin节目（这是一个像jsfiddle一样的一体化解决方案）。

或者，您可以从按钮中删除type='submit'，我认为这也可以。

我的提交按钮的onclick功能正在进行什么？

3 个答案: