刪除 div 部分下方的空白區域

Question

我有一個包含兩個圖像的 div，當單擊每個圖像時，它們會顯示一些文本。

 $('span.a, span.b').click(function() { if (!$(this).hasClass('active')) { $('span.a, span.b').removeClass('active'); $(this).addClass('active'); $('div.a, div.b').toggle(); } $('div.a, div.b').css("visibility","visible") });

 div.a, div.b { visibility:hidden; } .footer { font-family:'Arial'; font-size:13px; background-color:#000; color:#fff; text-align:center; padding:20px; }

 <div style="background-color:#fff;"><center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span> <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span> <div class="a">Cornerstone Parking provides value for money parking in Brisbane's CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park's online discount rates and you can always be sure of getting a bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div> <div class="b" style="display:none">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory and consultation services.</div> </center> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></div> <div class="footer">Footer content </div>

我有兩個問題：我需要最小化第一個 div 中兩個圖像下方的大空白 - 可以這樣做嗎？

當再次單擊圖像時，Javascript 代碼是否可能再次隱藏文本？

謝謝！

Answer 1

額外的空間來自使用visibility: hidden; 這將在頁面上留下隱藏內容的布局，但在視覺上隱藏它（所以它是不可見的）。 使用display: none; 而是從頁面中刪除內容的布局，就好像它從未存在過一樣。

然后您可以簡化您的 jQuery，只需切換一個類來指定活動/非活動圖像，然后在 CSS 中使用同級選擇器來顯示活動內容。

 $('span.a, span.b').click(function() { $(this).siblings().removeClass('active'); $(this).toggleClass('active'); });

 div.a, div.b { display: none; } .a.active ~ .a, .b.active ~ .b { display: block; } .footer { font-family:'Arial'; font-size:13px; background-color:#000; color:#fff; text-align:center; padding:20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="background-color:#fff;"> <center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span> <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span> <div class="a">Cornerstone Parking provides value for money parking in Brisbane's CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park's online discount rates and you can always be sure of getting a bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div> <div class="b">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory and consultation services.</div> </center> </div> <div class="footer">Footer content </div>

Answer 2

您的 JavaScript 函數僅檢查該類是否處於活動狀態

if (!$(this).hasClass('active'))

您應該編寫一個 else 語句來切換可見性。

空白是一個樣式問題。 您應該在 CSS 中編輯邊距/填充。