javascript - 使用可见性的 Jquery 大量加/减按钮

Question

我尝试修改在这个问题的答案中找到的解决方案:

Jquery toggle (Click to show one div while hiding others)

但我需要更改显示/隐藏状态，这是因为我的 div 元素必须占用页面上的空间，保持在固定位置而不是下拉。 这是我的 jquery 代码:

$(".sticker").click(function(){
    var gid = $(this).attr('id');
    var id = gid.split("-")[1];

    if ($(this).children("img").attr("src")=="img/plus.png") {
        $(this).children("img").attr("src","img/minus.png");
        $('#'+id).addClass('visible');
    } 
    else {
        $(this).children("img").attr("src","img/plus.png");
        $('#'+id).removeClass('visible');
    }

}); 

html代码:

<div id="container">
 <div class="more" id="one">
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
 </div>
<div class="sticker" id="sticker-one"><img src="img/plus.png" width="28" height="28" /></div>

 <div class="more" id="two">
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
 </div>
 <div class="sticker" id="sticker-two"><img src="img/plus.png" width="28" height="28" /></div>

 <div class="more" id="three">
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
 </div>
 <div class="sticker" id="sticker-three"><img src="img/plus.png" width="28" height="28" /></div>
</div>

“可见”的 css 类是 =

.visible {
    visibility:visible;
}

Fiddle Demo

我想在点击一个新的“贴纸”时也隐藏“.more”打开的 div 的可见性，以便每次只打开一个 div。

Answer 1

您的代码似乎运行良好。您可能只需要设置 !important 因为它似乎不会在类更改时变得可见

.visible {
    visibility:visible !important;
}

这里还有一个更紧凑的修改代码。

$(".sticker").click(function() {

  var $t = $(this);
  var $img = $t.children("img");

  if ($img[0].src.indexOf('plus') > -1) {
    $img[0].src = 'img/minus.png';
    $t.prev('.more').addClass('visible');
  } else {
    $img[0].src = 'img/plus.png';
    $t.prev('.more').removeClass('visible');
  }

});

.visible {
  visibility: visible !important;
}
.more {
  visibility: hidden;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
  <div class="more" id="one">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-one">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="two">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-two">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="three">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-three">
    <img src="img/plus.png" width="28" height="28" />
  </div>
</div>

这是你的代码

$(".sticker").click(function(){
    var gid = $(this).attr('id');
    var id = gid.split("-")[1];

    if ($(this).children("img").attr("src")=="img/plus.png") {
        $(this).children("img").attr("src","img/minus.png");
        $('#'+id).addClass('visible');
    } 
    else {
        $(this).children("img").attr("src","img/plus.png");
        $('#'+id).removeClass('visible');
    }

}); 

.visible {
  visibility: visible !important;
}
.more {
  visibility: hidden;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
  <div class="more" id="one">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-one">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="two">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-two">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="three">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-three">
    <img src="img/plus.png" width="28" height="28" />
  </div>
</div>