如何完美地改变加减号以显示打开和关闭层

Question

你好，我已经创建了一个列表，用于显示产品和它的细节，但我不愿意改变减号和加号，当我打开一个层“加”变成减号，但在一次点击后，它没有改变“加”号再次。如何做，请看图片更好地了解。

null

$('#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>

null

Answer 1

有几件事我会在这里改变:

1. 重新构造列表，使向下滑动部分成为要单击的li的子列表（更易访问且语义正确）
2. 将css用于加号和减号
3. 在打开的li父级上切换类

null

var $subLists = $('.sub-list'); // get all sublists
var $li = $('.SLayer'); // get all lis

$li.on('click', function(e) {
  var $thisLi = $(e.currentTarget); // get the clicked li
  var $thisSubList = $thisLi.children('.sub-list'); // get sub list in clicked li

  $li.not($thisLi).removeClass('open'); // remove open class from all non clicked li
  $subLists.not($thisSubList).slideUp(); // close all sublists no in clicked li

  $thisLi.toggleClass('open'); // toggle class on clicked li
  $thisSubList.stop().slideToggle(); // slideToggle the siblist
});

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #cccccc;
}

.sub-list {
  display: none;
  background: blue;
}

.SLayer {
  padding: 0.5em 0;
}

.SLayer:before {
  content: '+';
  width: 1.5em;
  margin-left: 0.5em;
  display: inline-block;
}

.SLayer.open:before {
  content: '-';
}

.SLayer1 {
  padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li class="SLayer" id="layername">
    <span class="title">Car</span>
    <ul class="list sub-list">
      <li class="SLayer1">Car details</li>
    </ul>
  </li>
  <li class="SLayer" id="layername">
    <span class="title">Bus</span>
    <ul class="list sub-list">
      <li class="SLayer1">Bus details</li>
    </ul>
  </li>
  <li class="SLayer" id="layername">
    <span class="title">Train</span>
    <ul class="list sub-list">
      <li class="SLayer1">Train details</li>
    </ul>
  </li>
</ul>

Answer 2

一些建议:

1. 最好使用CSS作为加号和减号图标，而不是HTML，
对一个项目使用一个LI，并在该LI中保留2个不同的div或H或P，因此这里应该是3个LI，而不是6个，这可能会有所不同，但对我来说，这将是理想的一个。
2. 不要为每次单击编写代码，使用模块化代码，这样，如果内容增加或减少，您就不需要更改jQuery代码

null

$('.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>

Answer 3

我稍微修改了你的代码。您可以尝试以下操作:

$('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();
})

演示

null

$('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>