Блог

Главная - Вопросы по программированию - как идеально изменить знак плюс и минус для отображения открытых и закрытых слоев

как идеально изменить знак плюс и минус для отображения открытых и закрытых слоев

#javascript #jquery

#javascript #jquery

Вопрос:

введите описание изображения здесь

Здравствуйте, я создал список для отображения продукта и его деталей, но не могу изменить знак минуса и плюса, когда я открываю слои, «плюс» меняется на минус, но после еще одного щелчка он снова не меняется на знак «плюс». как это сделать, пожалуйста, смотрите изображение для лучшего понимания.

 $('#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>amp;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>amp;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>amp;nbsp;<span>  Train</span> </li>
  <li class="SLayer" id="layerDetail3" style="background:blue; padding: 20px; color: white; display: none">Car Details</li>
</ul>

Ответ №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>amp;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>amp;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>amp;nbsp;<span>  Train</span> </li>
  <li class="SLayer" id="layerDetail3" style="background:blue; padding: 20px; color: white; display: none">Car Details</li>
</ul>

Ответ №2:

Некоторые предложения:

  1. было бы лучше использовать CSS для значков плюс и минус, а не HTML,
  2. используйте один LI для одного элемента и храните 2 разных div или H или P внутри этого LI, так что здесь должно быть 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>