JS/CSS div展开不起作用

Question

我有下面的代码，我认为应该让'content_cards'在你点击'标题'div时出现，然后当你再次点击它时隐藏，但它看起来不像正在工作。它似乎刷新了页面。

我试图通过使用按钮作为选择器，但因为我有其他按钮，它不会工作。

$(document).ready(function() { 
 
\t $(".title").on("click", function() { 
 
\t \t $("#content1").toggleClass("expando1"); 
 
\t \t $("#content2").toggleClass("expando2"); 
 
\t }); 
 
});

.expando1 { 
 
\t max-height: 60rem; 
 
} 
 

 
.expando2 { 
 
\t max-height: 200rem; 
 
} 
 

 
.content_cards { 
 
\t overflow: hidden; 
 
\t transition: all 2s ease; 
 
\t max-height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="title"> 
 
    <button>expand/collapse</button> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"> 
 
    <h4>Trevor Macdonald</h4> 
 
    <div class="content_cards" id="content1"> 
 
    <p>Born in Trinidad in 1939, Trevor worked in various aspects of the media including local newspapers, radio and television. He joined the Caribbean regional service of the BBC World Service in 1960 as a producer, before moving to London at the end of that decade to work for BBC Radio, London. 
 
    Moving to Independent Television News (ITN) in 1973, he rose steadily through the ranks. He's served as news, sports and diplomatic correspondent before moving on to become diplomatic editor and newscaster. Twice voted Newscaster of the year, McDonald is perceived as the face of ITN after years of fronting its flagship 'News at Ten' bulletin. 
 
    An accomplished journalist, he has penned several books including autobiographies on cricketers Clive Lloyd and Viv Richards. His own biography, 'Fortunate Circumstances', was published in 1993. Once viewed as the best-spoken person in the country and was reported to have fronted a two-year inquiry into the state of language learning. It warned that government education policy failed to teach pupils the necessary language skills needed for later life. 
 
    In 1992 he received an OBE in the Queen's Honours List, and received a knighthood in 1999. He continues to be the anchor for the News at Ten, and presents Tonight with Trevor McDonald, which was launched in 1999.</p> 
 
    </div> 
 
</div> 
 
    <div class="card"> 
 
    <h4>Shirley Bassey</h4> 
 
    <div class="content_cards" id="content2"> 
 
    <p>Shirley Bassey was born in Tiger Bay, Cardiff in 1937, the youngest of seven children. In 1952, Shirley left school to work in the packing department of a sausage factory, all the while singing at local clubs which catered to working men. 
 
    It wasn’t long before Shirley turned professional, In 1955, Shirley appeared at the Astor Club in London, and the world began to take notice of her incredible talent. 
 
    Her first single was “Burn My Candle”, but her first real hit was “Banana Boat Song”. Her debut album, “Born to Sing the Blues” was released in 1958. Hit after hit soon followed, with “As I Love You” and “Kiss Me, Honey Honey, Kiss Me” appearing on record charts simultaneously. Shirley’s first big international hit was 1964’s “Goldfinger” from the James Bond film of the same name. 
 
    In 1977 she received the Brit Award for Best British Female Solo Artist in the previous 25 years. Bassey has been called "one of the most popular female vocalists in Britain during the last half of the 20th century." In 2000, Bassey was made a Dame by Queen Elizabeth II for services to the performing arts.</p> 
 
    </div> 
 
</div> 
 

 
<div class="card"> 
 
    <h4>Sadiq Khan</h4> 
 
    <div class="content_cards" id="content2"> 
 
    <p>Sadiq was born in St George’s Hospital in Tooting, growing up on a council estate in Earlsfield. He attended local state schools Fircroft Primary School (where he is now a governor), Ernest Bevin Comprehensive School and Burntwood Girls Secondary School. His father was a London Transport bus driver for more than 25 years. 
 
    Prior to becoming the MP for Tooting, Sadiq was a Human Rights solicitor and was a founding partner of one of the country's leading Human Rights firms. In his final year of practising law he was listed as one of the county's leading lawyers in two separate categories of law in the Chambers and Partners directory 2004-05 (Human Rights and Police law). 
 
    Previously the Shadow Secretary of State for Transport, Sadiq was the first ever BAME politician to be elected to the Labour Party’s Shadow Cabinet, and was the youngest member of Ed Miliband’s cabinet. He served in a number of ministerial posts during the last Labour Government. He is a member of the Labour Party’s National Executive Committee (NEC), the Labour Party’s governing and policy-making body. 
 
    Khan was elected Mayor of London in the 2016 mayoral election, succeeding Conservative Party Mayor Boris Johnson. He resigned as MP for Tooting on 9 May 2016. His election as Mayor of London made him the city's first ethnic minority mayor, and the first Muslim to become mayor of a major Western capital. Khan held the largest personal mandate of any politician in the history of the United Kingdom, and the third largest personal mandate in Europe.</p> 
 
    </div> 
 
</div> 
 

 
<div class="card"> 
 
    <h4>Arthur Wharton</h4> 
 
    <div class="content_cards" id="content2"> 
 
    <p>Wharton was born in Jamestown, Gold Coast (now Accra, Ghana). In 1884, aged 19, Arthur moved to England to train as a Methodist preacher at Cleveland College, Darlington. 
 
    It was whilst at College that he began his amazing sporting careers, competing at this stage as a 'gentleman amateur'. He excelled at everything he tried (even setting a record time for cycling between Preston and Blackburn in 1887). 
 
    In 1886 Arthur became the fastest man in Britain winning the Amateur Athletics Association national 100 yards champion at Stamford Bridge, London - the first time the trophy was won by a Northerner. 
 
    His sporting prowess was spotted at Darlington Football Club, where he was selected to play as goalkeeper. Arthur became the first black professional footballer in Britain. In 2014 a 16ft statue of Arthur was unveiled at the FA's national football centre in Burton.</p> 
 
    </div> 
 
</div> 
 

 
<div class="card"> 
 
    <h4>Dame Kelly Holmes</h4> 
 
    <div class="content_cards" id="content2"> 
 
    <p>Born in Pembury, Kent, the daughter of Derrick Holmes, a Jamaican-born car mechanic, and an English mother, Pam Norman. Her mother, 18 at the time of her birth, married painter and decorator Michael Norris, whom Holmes regards as her father, seven years later, and the couple had two more children (Kevin, born 1977 and Stuart, born 1980) before splitting up in 1987. Holmes grew up in Hildenborough and attended Hildenborough CEP School, and then Hugh Christie Comprehensive School in Tonbridge at the age of 12. 
 
    She started training for athletics at the age of 12, joining Tonbridge Athletics Club, where she was coached by David Arnold and went on to win the English schools 1500 metres in her second season in 1983.[citation needed] Her hero was British middle distance runner Steve Ovett, and she was inspired by his success at the 1980 Summer Olympics 
 
    She specialised in the 800 metres and 1500 metres events won a gold medal for both distances at the 2004 Summer Olympics in Athens, making her the first British woman to win two gold medals and the country’s first double gold medallist at the same games since Albert Hill in 1920. She set British records in numerous events and still holds the records over the 600, 800, 1000, and 1500 metres distances. </p> 
 
    </div> 
 
</div> 
 

 
<div class="card"> 
 
    <h4>Zayn Malik</h4> 
 
    <div class="content_cards" id="content2"> 
 
    <p>Zayn Malik was born on January 12, 1993, in Bradford, England, to a family of English-Pakistani descent. He had an early love for singing and performing, and at the age of 17 he competed in the television competition The X Factor. He was teamed up with four other male contestants to form the group act One Direction, who went on to become one of the most popular boy bands in music history. The group's debut studio album Up All Night was released in November 2011. It topped the charts in 16 countries. The lead single, "What Makes You Beautiful", was an international commercial success, reaching number one in the UK and number four in the US; it has since been certified four and six times platinum in the US and Australia, respectively. 
 
    He is an official ambassador of the British Asian Trust charity group, contributing to improving the lives of disadvantaged people living in South Asia. With his former group One Direction, he contributed to African fundraising events with Comic Relief. In March 2016, he bought a box at Bradford City for underprivileged children to watch football, named after his maternal grandfather Walter Brannan. As of April 2015, shortly after he left One Direction, Malik's net worth was £25 million ($41 million).As of April 2016, his net worth is £30 million ($49 million). 
 
    Malik left the group in March 2015. The following year, he released his first solo album. Malik signed a solo recording contract with RCA Records in 2015, with his debut studio album Mind of Mine released on 25 March 2016. The album and its lead single, "Pillowtalk", reached number one in a number of countries, including the United Kingdom, United States, Australia, Canada and New Zealand, with Malik becoming the first British male artist to debut at number one in both the UK and US with his debut single and debut album. Worldwide, he had the highest first-day and weekly streams for a debut artist.</p> 
 
    </div> 
 
</div> 
 

 
<div class="card"> 
 
    <h4>Ignatius Sancho</h4> 
 
    <div class="content_cards" id="content2"> 
 
    <p>Sancho was born around 1729 on board a slave ship en route to the West Indies. He spent the first two years of his life enslaved in Grenada. Orphaned in infancy, he was brought to England by his master at the age of two or three and given to three maiden sisters living in Greenwich. 
 
    He was rescued by the Duke of Montagu, who lived nearby in Blackheath. The Duke, encountering the Sancho by accident, took a liking to his frankness of manner. Sancho eventually ended up working as a butler in the Montagu household. 
 
    He went on to compose music and write poetry and plays and in 1773, Sancho and his wife set up a grocer's shop in Westminster. Sancho was very well known and his shop became a meeting place for some of the most famous writers, artists, actors and politicians of the day. 
 
    Perhaps most notable Ignatius Sancho was known for being the first Black Briton to vote in a UK election. After his death in 1780, Sancho's letters were published in a book, which became an immediate best seller. Five editions of the book were published and his writing was used as evidence to support the movement to end slavery. It was this piece that led Sancho become the first African author to have his work published in this country.</p> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

这是因为.expando类具有相同特异性的.content_cards和.content_cards在CSS定义的最后一个，所以它是应用的最后。

只要将.content_cards放在.expando之上就可以解决问题。

.content_cards { 
    overflow: hidden; 
    transition: all 2s ease; 
    max-height: 0; 
} 

.expando1 { 
    max-height: 60rem; 
} 

.expando2 { 
    max-height: 200rem; 
} 

---

否则做出更具体的规则，像

.content_cards.expando1 { 
    max-height: 60rem; 
} 

.content_cards.expando2 { 
    max-height: 200rem; 
} 

.content_cards { 
    overflow: hidden; 
    transition: all 2s ease; 
    max-height: 0; 
}