2017-03-20 18 views
0

這就是我想爲我的項目做的事情。我有一個簡單的內容框包裝在一個div標籤。有段落加入,並有自己的規則編號。我已經設置了邊距,填充,等等。然後在底部,我添加了一個典型的提交按鈕。我標記的內容顯示更多。隨着我的內容框中發生溢出,我想增加高度,以便它可以顯示文本的其餘部分。但是,當我用if/else語句在匿名函數中添加onclick命令時,事情會變得有些不和諧。我的提交按鈕的onclick函數發生了什麼?

以下是HTML代碼。

var content = document.getElementById('contentbox'); 
 
    var button = document.getElementById('showMore'); 
 
    
 
    button.onclick = function() { 
 
    \t if(content.className == "open") { 
 
    \t \t content.className = ""; 
 
    \t } else { 
 
    \t \t content.className = "open"; 
 
    \t } 
 
    };
body { 
 
    \t padding:0; 
 
    \t margin:0; 
 
    \t font-family:sans-serif; 
 
    } 
 
    
 
    #contentbox { 
 
    \t margin:100px 300px 100px 300px; 
 
    \t border:1px solid black; 
 
    \t padding:5px 0px 5px 20px; 
 
    \t max-height:200px; 
 
    \t overflow:hidden; 
 
    \t background:silver; 
 
    \t border-radius:10px; 
 
    
 
    } 
 
    #contentbox.open { 
 
    \t max-height:1000px; 
 
    \t overflow:visible; 
 
    } 
 
    #content { 
 
    \t color:white; 
 
    \t font-size:20px; 
 
    \t text-indent:30px; 
 
    } 
 
    
 
    #showMore { 
 
    \t margin-left:auto; 
 
    \t margin-right:auto; 
 
    \t display:block; 
 
    \t background:gray; 
 
    \t font-size:40px; 
 
    \t text-transform:uppercase; 
 
    \t font-family:impact; 
 
    \t color:silver; 
 
    \t transition:all 0.5s ease-in-out; 
 
    } 
 
    #showMore:hover { 
 
    \t color:gray; 
 
    \t background:silver; 
 
    \t cursor:pointer; 
 
    }
 <html> 
 
    <head> 
 
    \t <title>Kenneth's new HTML/CSS Exercise</title> 
 
    \t <meta charset="UTF-8"> 
 
    \t <link rel='stylesheet' type='text/css' href='contentbox.css'> 
 
    \t <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> 
 

 

 
    
 

 

這是怎麼回事,什麼我必須做修復它?

+1

提交按鈕提交 – epascarello

+0

呵呵?你到底什麼意思? –

+0

提交按鈕提交頁面,以便重置頁面的狀態。 – epascarello

回答

0

試着這樣做:

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"; 
    } 
    // 
}; 

這樣一來可以防止提交事件跳過你的邏輯。 但是你需要在這種情況下的所有操作之後手動提交表單。

0

它設置爲高度不最大高度 希望它有助於

0

這裏發生了什麼。

.open風格溢出:可見特性使得它,使文本不斷通過瀏覽器連盒的最大高度之後得到繪製。你可能不希望這樣。

如果你這樣做,高度將根據內容計算。

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

Working jsfiddle

overflow屬性不應該被改變,除非你想改變滾動行爲(通常情況下)。最大高度初始值將覆蓋最大高度。

如果你想有一個滾動條來代替,這樣做:

#contentbox.open { 
    overflow: auto; 
} 

,你可以改變的最大高度,如果你想動。

希望這是一個很好的解釋。


其他用戶指出你的按鈕是一個提交按鈕。這可能會導致問題,因爲它可能會觸發頁面加載,取消您嘗試執行的任何操作。在之前的jsfiddle鏈接中,按鈕不提交表單,所以代碼按原樣工作(不返回false,更改按鈕類型或停止傳播)。

但是,如果您沒有提交表單,您可能想要更改您的點擊處理程序以返回false,如paste bin所示(與jsfiddle類似,這是一個全合一的解決方案)。或者,您可以從您的按鈕中刪除type='submit',我認爲這也可以。

+0

由於某種原因,它完全沒有工作。任何其他可能的工作? –

+0

這對我工作jsfiddle。查看調試器(F12)並檢查元素以查看計算樣式。有些東西可能會壓倒它。我會得到一個工作解決方案的js小提琴。 –

+0

添加ze小提琴。 –