如何完美更改加號和減號以顯示打開和關閉圖層

Question

您好，我已經創建了一個列表，用於顯示產品及其詳細信息，但是當我打開一個“加號”變為減號的圖層時，我無法更改減號和加號，但再單擊一次后，它不會再次更改為“加號”。 如何做到這一點請看圖片以便更好地理解。

 $('#layername').click(function() { $('#layerDetail').slideToggle(); $('#layerDetail2').slideUp(); $('#layerDetail3').slideUp(); }) $('#layername2').click(function() { $('#layerDetail2').slideToggle(); $('#layerDetail1').slideUp(); $('#layerDetail').slideUp(); }) $('#layername3').click(function() { $('#layerDetail3').slideToggle(); $('#layerDetail').slideUp(); $('#layerDetail2').slideUp(); }) $('.SLayer').click(function() { x = $(this).next('li'); if ($(this).next('li').css('display') == 'none') { $(this).find('span:first').text('+') } else { $(this).find('span:first').text('-') } });

 * { box-sizing: border-box } body { font-family: "Lato", sans-serif; }.SLayer { background: #eee; padding: 10px; cursor: pointer; }

 <ul style="list-style: none; "> <li class="SLayer" id="layername"> <span style="font-weight: 600; color:black">+</span>&nbsp;<span> Car </span> </li> <li class="SLayer" id="layerDetail" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer" id="layername2"><span style="font-weight: 600; color:black">+</span>&nbsp;<span> Bus </span> </li> <li class="SLayer" id="layerDetail2" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer" id="layername3"><span style="font-weight: 600; color:black">+</span>&nbsp;<span> Train</span> </li> <li class="SLayer" id="layerDetail3" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> </ul>

Answer 1

我稍微修改了你的代碼。 你可以試試這個：

$('li[id^=layername]').click(function() {
  var t = $(this).next();
  $("span:first",this).text($("span:first",this).text() == "+" ? "-" : "+")
  t.slideToggle();
  $('li[id^=layername]').not(this).find("span:first").text('+');
  $('li[id^=layerDetail]').not(t).slideUp();
})

演示

 $('li[id^=layername]').click(function() { var t = $(this).next(); $("span:first",this).text($("span:first",this).text() == "+"? "-": "+") t.slideToggle(); $('li[id^=layername]').not(this).find("span:first").text('+'); $('li[id^=layerDetail]').not(t).slideUp(); })

 * { box-sizing: border-box } body { font-family: "Lato", sans-serif; }.SLayer { background: #eee; padding: 10px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul style="list-style: none; "> <li class="SLayer" id="layername"> <span style="font-weight: 600; color:black">+</span>&nbsp;<span> Car </span> </li> <li class="SLayer" id="layerDetail" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer" id="layername2"><span style="font-weight: 600; color:black">+</span>&nbsp;<span> Bus </span> </li> <li class="SLayer" id="layerDetail2" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer" id="layername3"> <span style="font-weight: 600; color:black">+</span>&nbsp;<span> Train</span> </li> <li class="SLayer" id="layerDetail3" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> </ul>

Answer 2

一些建議：

1. 最好將 CSS 用於加號和減號圖標，而不是 HTML，
2. 對一個項目使用一個 LI，並在該 LI 中保留 2 個不同的 div 或 H 或 P，所以對於這種結構，這里應該是 3 個 LI 而不是 6 個，這可能會有所不同，但對我來說，那將是理想的。
3. 不要每次點擊都編寫代碼，使用模塊化代碼，這樣如果內容增加或減少，則無需更改 jQuery 代碼

 $('.header').click(function() { $(".header").not(this).next().slideUp(); $(this).next().slideToggle(); $(".header").not(this).removeClass("opened"); $(this).toggleClass("opened"); })

 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Lato", sans-serif; }.SLayer { background: #eee; padding: 10px; cursor: pointer; }.header {padding-left: 30px;position: relative;}.header:before, .header:after { content: ""; display: block; position: absolute; height: 1px; width: 10px; background: red; top: 50%; left: 14px; transform: translateY(-50%); }.header:before { transform: translateY(-50%) rotate(90deg); }.header.opened:before { opacity: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul style="list-style: none; "> <li class="SLayer header" id="layername"> Car </li> <li class="SLayer" id="layerDetail" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer header" id="layername2"> Bus </li> <li class="SLayer" id="layerDetail2" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> <li class="SLayer header" id="layername3"> Train </li> <li class="SLayer" id="layerDetail3" style="background:blue; padding: 20px; color: white; display: none">Car Details</li> </ul>