Javascript 使用可见性的Jquery加号/减号按钮

我试图修改此问题答案中的解决方案：

但是除了显示/隐藏，我需要更改可见/隐藏状态，这是因为我的divs元素必须占据页面上的空间，保持在固定位置，而不是下拉列表。 这是我的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>

---

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

您的代码似乎工作正常。您可能只需要设置

！重要信息

，因为它似乎在类更改时不可见

.visible {
    visibility:visible !important;
}

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

$（“.sticker”）。单击（函数（）{
var$t=$（本）；
var$img=$t.children（“img”）；
if（$img[0].src.indexOf（'plus'）>-1）{
$img[0].src='img/减号.png'；
$t.prev（'.more'）.addClass（'visible'）；
}否则{
$img[0].src='img/plus.png'；
$t.prev（'.more'）.removeClass（'visible'）；
}
});
。可见{
可见性：可见！重要；
}
.更多{
可见性：隐藏；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者

Lorem ipsum dolor sit amet，是一位杰出的献身者

Lorem ipsum dolor sit amet，是一位杰出的献身者

使用可见性和显示解决了这两个问题

显示=无/块：
css

js

可见性=隐藏/可见：
将每个单击事件放入数组中的“.more”div

例如，单击5次后的阵列将为：

arr=[“零”，div#1.more，div#2.more.visible，div#3.more，div#2.more.visible，div#1.more]

然后创建两个变量$prev和$current

$prev获取先前打开的“.more”div的id，$current获取当前打开的div的id。
然后删除上一个div中的“visible”类，并在当前div中添加“visible”类

css

js

.visible {
    visibility:visible !important;
}

.visible {
 display: none;
 }

    $(document).ready(function(){
    $(".sticker").each(function() {
        var $t = $(this);
        var $img = $t.children("img");
        var $m = $t.prev();

        $($t).on('click', function(){
            if ($img[0].src.indexOf('plus') > -1) {
                $img[0].src = 'img/minus.png';
                $t.prev('.more').toggle();
              } else {
                $img[0].src = 'img/plus.png';
                $t.prev('.more').toggle();
              } 
            $('.more').not($m[0]).hide();   
            var r = $('.sticker').children("img").not($img);
            r[0].src = 'img/plus.png';
            r[1].src = 'img/plus.png';
        });
    });
    });

.more {
  position: absolute;
  visibility:hidden;
 }

.visible {
  visibility: visible;
}

    $(document).ready(function() {
    var i = 0;
    var $arr = Array();

    $arr[i] = "zero";

    $(".sticker").each(function() {
        var $t = $(this);
        var $img = $t.children("img");
        var $m = $t.prev();

        function change() {
            $img[0].src = 'img/minus.png';
            $t.prev('.more').addClass('visible');
        }


        $($t).on('click', function() {
            var $d = $m[0];
            i++;

            $arr[i] = $d;

            $prev = $($arr[i - 1]).attr('id');

            $current = $($arr[i]).attr('id');

            if ($img[0].src.indexOf('minus') > -1) {

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

                $("#" + $prev).removeClass('visible');

                var myimg = $("#" + $prev).next('.sticker').children("img");

                myimg[0].src = 'img/plus.png';

                change();

            } else if ($img[0].src.indexOf('plus') > -1 && $prev == $current || $arr[1]) {

                change();
            }
        });
    });
});